Responsive devices

BuiltWith Bootstrap

Bootstrap is made to not only look and behave great in the latest desktop browsers, but in tablet and smartphone browsers too. It's packed with features; a 12-column responsive grid, dozens of components, plugins and more!.

Supported Devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Smartphones 480px and below Fluid columns, no fixed widths
Smartphones to tablets 767px and below Fluid columns, no fixed widths
Portrait tablets 768px and above 42px 20px
Default 980px and up 60px 20px
Large display 1200px and up 70px 30px

Default grid system 12 columns with a responsive twist

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system is a 12-column grid. It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns defined as part of the grid system.

Offsetting Columns

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

Nesting Columns

To nest your content, just add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.

Level 1 of column
Level 2
Level 2
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

Responsive Utility Classes

What Are They

For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support Classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible
青岛网站制作大型企业信息安全规划教育网站 网页赏析青岛微网站建设建行手机网站网址是多少钱网站换程序科技网站配色方案企业内部网络安全 案例网站建立需要多少钱主流网站风格女警叶未明刚被纳入重案组,就沾光收到了一面锦旗——来自被拐至原芜村的女孩小光的父母。 然而,原芜村青年陆光的报警却让她陷入一个围绕名为“日绝”的女子的巨大黑色漩涡。 我暗恋班花,偷看她的时候竟被发现放学,班花带我去小树林……从此,踏上了一条不归路……本书又名《我在三国强行拼团》《三国砍我,我一人砍三国》 刘云穿越到东汉,绑定附身了拼团系统,本想活命发育,偏偏黄巾起义,一个不小心还将刘备给秒杀了,不得已卷入三国时代。 刘云:“开团了,赶紧冲!来呀,砍我呀!这点兵马,砍我都不够,怎么当反派的?” 刘云:“来嘛,切磋切磋,是兄弟,就来砍我,砍一刀,一刀接一刀,完事请你喝酒。” 只见刘云一路横跳,到处强行找人拼团,势力越砍越大。 天子脖子架着刀:“刘云,你再不登基,我就砍自己了。” 2050年,一颗直径超过10公里的小行星落入浪漫之城玛丽安娜境内,随后,地震引发的海啸淹没了第五大陆,全球气候发生剧变,爆炸扬起的尘埃覆盖了天空,遮蔽了太阳,全球温度下降了约15摄氏度,人类陷入恐慌之中。 2051年,武器商人赫尔曼以合众国的名义进入第二大陆东北角的贫穷国家,索尼亚。 2055年,第二大陆被索尼亚统一 2059年,第四大陆,雨林之国森巴的原政府被推翻,新政府上台。 2060年,第一大陆南部国家被不明势力尽数占领。 2061年,第五大陆剩余土地上,除不列颠帝国外,全部沦陷,同年,赫尔曼发表通告,宣布建立人类复兴政府,向现存各国宣战。 同年,世界建立了北部战时联合国,东部战时联合国以及西部战时联合国,向人类复兴政府宣战。 2074年,这是世界变成地狱的13年后,也是故事的开端。 兼任宇主的万物皇降临灵汉恢复盛世,转眼间到了转移回原本宇宙的时候,万物皇创造出一个猫形移动储物库,命其成为自己小儿子的爱宠,便将传国之宝·敬天法祖大玉圭等多种神器存放于储物库,等待小儿子继任宇主大位,持宝玺名正言顺的继续完成他的大业……水沝淼?…… 万籁归寂之夜,他从老橡树林的坟场中醒来。这世界是如此的陌生,不禁令他心生恐惧。他翻遍浑身,就只有那么一张疑点重重的羊皮卷。 抽丝剥茧,不可名状的黑暗腐朽之物令人莫名疯狂! 步步深入,残酷的阴谋漩涡让人迷失方向! 拼死奋战,血气森严的利刃叫人不知所措! 他不要一世繁华,只愿人间清醒!这里没有固定的主角,但有固定的level! 你可以体会到真正的‘恐怖’!修炼世界原本没有了妖族,几千年后,为何妖族忽然现世?为何师傅会再次叛变?太多问题需要解释了,燕雀和秦棋能解决这修炼世界中的灭顶之灾吗?扑街漫画家重生到异世界,发现这个世界的科技明明比原来的世界还牛逼,但是漫画和游戏却还停留在原世界90年代。 这让黄梁欣喜不已,“哈哈哈,既然如此就别怪我当文抄公啦!” 高达!龙珠!超时空要塞! 无数经典漫画的出现让半夏走上了人生的巅峰 直到某一天,一个叫做尼克弗瑞的卤蛋敲响了黄梁的家门
在线营销型网站制作 信息安全和电脑安全 优秀网站设计 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 定制版网站建设费用 无锡企业网站制作公司 第九届亚太区信息安全secureasia大会 中国计算机学会 web信息安全 上海学校 提高网络营销的能力 内容营销百度百科 灵性成长工作坊咨询【www.richdady.cn】 冤亲债主干扰的超度方法【www.richdady.cn】 特殊学校的教育理念咨询【www.richdady.cn】 灵魂治疗与心理辅导【www.richdady.cn】 与公婆前世的识别方法【www.richdady.cn】 婴灵的超度方法有哪些?咨询【σσЗ8З55О88О√转ihbwel 前世缘份的前世缘分咨询【σσЗ8З55О88О√转ihbwel 官司的法律援助【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与女友前世的前世案例咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿的心理调适咨询【www.richdady.cn】√转ihbwel 特殊学校的师资力量【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子不爱读书的阅读习惯威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 纠纷的调解技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 有官司的解决方法咨询【微:qq383550880 】√转ihbwel 如何化解冤亲债主的干扰?咨询【微:qq383550880 】√转ihbwel 如何改善财运不佳的情况?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业发展的灵性视角【σσЗ8З55О88О√转ihbwel 家庭关系的沟通技巧【企鹅383550880】√转ihbwel 前世缘份的缘分奇迹【企鹅383550880】√转ihbwel 公司破产后的员工安置问题咨询【企鹅383550880】√转ihbwel 四川互联网营销 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 服装网络营销案例 网站后台 佛山新网站制作平台 上海银基信息安全技术 营销策划技巧 常州网站推广 网站收录差 全国专业信息安全服务资质咨询公司,-1 网络安全产业基金武汉 番禺建网站 深圳电子商城网站建设 青岛微网站建设 服务营销网 信息安全 讲座 全网营销包含哪些 新浪微博垃圾营销范围 云创通营销手机多少钱 信息安全类资质 婚纱摄影网站制作17年网络营销案例 科技网站配色方案 外贸网站制作时间及费用 深圳网站营销公司 品牌营销 长沙 网络营销专业知识吗 信息安全 讲座 信息安全实验室排行 建行手机网站网址是多少钱 电商营销网 信息安全等级保护安全建设专业技术人员证书 提高网络营销的能力 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 信息安全创业女生 化妆品网络营销好做吗 优秀网站设计 四川互联网营销 网络安全宣传员 信息安全测评招聘,-1 2017网络安全技术 新浪微博垃圾营销范围 无锡企业网站制作公司 三门峡网站建设 四川互联网营销 服装网络营销案例 营销策划技巧 营销型网站特点 域名网站 全球重大信息安全事件 网络安全 共建共享 沈阳做网站有名公司 珠海品牌网站建设 旅游响应式网站建设 网站收录差 做互联网营销执行 信息技术与信息安全 常见的网络攻击类型有 考生信息安全的通知 网站中木马怎么办网上营销方法 黄山网站建设 佛山新网站制作平台 网站建立需要多少钱 网络营销的三个方面 定制版网站建设费用 网络营销的定价策略有 网络安全 共建共享 网络安全逆向工程 网站中木马怎么办网上营销方法 内容营销百度百科 英雄联盟网站设计 深圳电子商城网站建设 信息安全cnas认证 网络安全与信息安全的区别,-1 全国专业信息安全服务资质咨询公司,-1 网站推广营销实训方案 网络安全通知 三门峡网站建设 云创通营销手机多少钱 服务营销网 网络营销数据的来源 网络营销专业知识吗 信息安全和电脑安全 网络安全和人工智能网络安全检测系统 在线营销型网站制作 网站没更新 网络安全宣传员 合肥网站制作公司 国家信息安全等级第二级保护制度 大型企业信息安全规划 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 网站换程序 企业内部网络安全 案例 主流网站风格 北京朝阳网站设计 云创通营销手机多少钱 免费微网站 免费微网站 网络安全和人工智能网络安全检测系统 高端网站制作公司 网站换程序 深圳品牌模板网站建设 国家网络安全管理中心 可口可乐的成功营销 传统营销方式的手段 2015亚太信息安全峰会 青岛外贸网站建设 上海银基信息安全技术 信息安全等级保护 部门新华三网络安全认证 网络安全通知 信息安全等级保护 部门新华三网络安全认证 网络信息安全实践报告 信息安全等级保护安全建设专业技术人员证书 微网站首页 上海建站网站简洁案例 深圳网站建设 独 信息安全和电脑安全 信息安全报告 2017 2017信息安全趋势 建行手机网站网址是多少钱 龙岗网站制作新闻 中央小组网络安全管理 无锡企业网站制作公司 网络安全与信息安全的区别,-1 网络营销教程视频 建网站怎么弄 上海网络安全周 信息安全等级保护 部门新华三网络安全认证 淮南网站建设好 一个虚拟主机在原网站根目录下加个子目录用域名转向怎么操作? 定制版网站建设费用 网络安全威胁的种类 信息安全等级保护协调小组 营销课程 北邮 信息安全培训大会 小企业网站免费建设 网络安全周内容