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
互助网站制作公司网站价钱成都企业网站建设公司北京信息安全测评认证中心网站设计公司 北京测试内容不属于网络安全测评的是北京网站建设开发赵县网站建设信息安全互联网公司成都企业网站建设公司在科技文明和自然科学的火山式喷发下,由现代化和新型文明笼罩的人类世界阴暗下的各个角落,正在滋生和蔓延着无数因人性的贪欲和野心而冲破禁锢的凶兽,如岩浆一般不断翻涌延伸,吞噬着整个世界。 人们吟诵着《七宗罪》的礼赞,为这个世界的变相毁灭奏响了最后一曲凄美的乐章。 一具畸形被改造的异变身躯,一丝灵魂深处的不屈挣扎,一颗坚守本心的钢铁意志。 如何在这外表光鲜却犹如炼狱般的“原始丛林”中奋勇求生,如何将这回光返照般的盛世打破而重塑,如何将泯灭的人性从深渊中救赎。 这一切而又一切的答案,早已隐藏于“人蛹”们蛹变之后的翅翼之中。 本是游戏设计师SSS级别的秦洛一觉醒来发现自己竟然穿越了,并且原主还欠下了不少的钱,于是秦洛依靠他的系统反手将许多知名大作拿了出来。 “请问您的游戏连续三年获得金游奖是一种怎样的体验?” “多靠各位同行的衬托罢了。” “那请问您接下来有什么打算吗?” “我的新游戏快要上线了,大家可以期待一下哦!” ······· 【我的世界】霸榜销售游戏榜单第一名多年 【火线】成为FPS游戏的开山鼻祖 【地下城】成为月收入最多的网游之一 ······ 【传统玄幻无系统+高武超燃+稳定更新】 你是否想过,今世的你,不是真实的你。 你是否在不经意间,见到似乎见到过的场景。 天道有轮回,人道亦有轮回。 曾经,我们都试图找寻过那个曾经的自己。 一人一剑站世颠,何惧再入轮回间!他知道自己想要什么,但他也知道自己该守护什么,底线是什么,靠着一帮兄弟挺起来,靠着大哥的教育,靠着大哥还有各路贵人扶持,一步一步的得到自己想要的,却也失去一些自己曾经拥有的我,叫做程敏刚,她,叫做杜淑萍,杜淑萍是我的老婆,已经登上人类顶峰的我,已经被无敌所带来的无聊寂寞所包围,因此决定追求平凡,安心过日,开始了一段崭新的人生。未来的世界,无限的未知,成为怪物亦或者成为英雄守护这仅有的这一方天空,怪物不断的进化人类又该如何才能再次爬上生物链的最高点一个舰队的去向又该去往什么地方生存。 没有任何人想要放弃,只要有一丝希望便要生存下去。[不要放弃,和我一起生存下去]香港三合会太子爷最近一个月频繁做梦,梦到了未来一生的经历,他以为梦是假的,直到有一天他发现他梦里的事都在发生,于是他开始了改变,他要改变自己的未来,他怎么也没想到自己一个帮派太子爷变成了世界首富,还拥有了娇妻佳儿王洋说:“如果有一天我不再东奔西走了。我希望我会停在一个我喜欢的地方,一个小城市或是一个小镇。一辆电动车就可以满足基本的交通,我会继续写故事拿一点稿费,来满足我自己的基本生活,而且我还希望我的故事可以帮到一些迷茫的人。如果可以过分一点的话,我还希望我可以谈一个恋爱,对方是一个普普通通平平凡凡的女生就好了,她也是和我一样是个旅人,因为喜欢这个小镇在这里停留。我们会相处很久,我会在一个合适的机会,和她求婚。婚礼的话……就不办了,旅行结婚吧!最后我们又回到了这个我们都喜欢的城市,开一家面包店,只是早晚营业。过着简单但不乏味的生活,我们会吵架,也会和好。然后我们有一个孩子,最好是男孩,我们把孩子抚养成人,孩子也开始东奔西走,我们也打算趁着还有力气再旅行一次。然后我们就老了,最后我会在我爱人之前死去……笑着看着他们,然后离开这个世界。” ——在这个浮躁的年代,我希望你能慢慢地看完这本书。你怎么什么都懂? 我看着像懂吗? 万能公式,果然是万能的 风水相师,山精鬼怪 我有系统,欲证长生道
茂名网站建设 课程培训营销 openssl与网络信息安全 下载 电影营销的方式 最大的网络安全公司排名 骏域网站 营销主题? 互助网站制作公司 信息安全 开源企业建网站多少钱 欧美风格网站设计 迟缓儿的家庭支持咨询【www.richdady.cn】 外灵干扰的前世故事【www.richdady.cn】 公司破产的法律咨询咨询【www.richdady.cn】 纠纷的预防措施【www.richdady.cn】 前世今生的神秘故事【www.richdady.cn】 孩子压力大的前世记忆【企鹅383550880】√转ihbwel 外灵干扰的环境影响咨询【企鹅383550880】√转ihbwel 精神不振威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何克服升迁障碍?咨询【www.richdady.cn】√转ihbwel 存不住钱的解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的父亲的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感觉整天没精神怎么办威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 解梦的案例分享咨询【企鹅383550880】√转ihbwel 如何识别冤亲债主干扰咨询【σσЗ8З55О88О√转ihbwel 升迁障碍的职场转型技巧有哪些?咨询【σσЗ8З55О88О√转ihbwel 升迁障碍的职场转型咨询【企鹅383550880】√转ihbwel 与公婆前世的故事分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 官司的解决方法咨询【www.richdady.cn】√转ihbwel 自闭症的自我提升【企鹅383550880】√转ihbwel 什么原因意外的心理调适【σσЗ8З55О88О√转ihbwel 网站建设改版 做网站网络公司 营销团队的介绍 常德网站优化 零售网站建设 信息安全等级保护 测评,-1 html5网站 网站建设 互联网营销精髓 衡水企业网站设计 杭州网站优化公司 广东信息安全学院 深圳网站开发 景县网站建设 信息安全等级保护实验室 网络安全渗透测试培训机构 广州市天河区网站设计公司 成都高端网站建设公司 测试内容不属于网络安全测评的是 openssl与网络信息安全 下载 南川网站制作 信息安全事态或事件 互联网营销项目 网络安全品牌 成都网络营销哪家好 网络安全 科研平台 东莞建网站 网站都需要续费吗 沈阳网络营销资讯 衡水企业网站设计 做门的网站建设 设计2017网络营销大会 茂名网站建设 信息安全服务资质办理 手机网站制作服务机构 零售网站建设 网络与信息安全技术 pdf 黄山网站设计 营销主题? 2017年9月网络安全月 骏域网站 第三方营销资源平台 烟草行业信息系统安全等级保护与信息安全事件的定级准则 北京网站建设开发 营销型网站建设页面 衡水网站设计费用 网络营销的具体内容 浪潮信息安全 公安网络安全检查方案 建个简单网站 最专业的手机网站建设 南川网站制作 打赏营销 中山精品网站建设策划 如何选择佛山网站建设 第三方营销资源平台 北京信息安全测评认证中心 长安网站设计 商贸行业网站建设公司 移动信息网络安全汇报 手机网站制作服务机构 营销型网站建设页面 网络与信息安全技术 pdf html5网站欣赏 电影营销的方式 关于网络安全的作文 营销人物 长春长春网站建设网 小米手机网络营销目标 东莞建网站 公司网站建设免费 交通标识用品适合网络营销吗? 天津建网站 网站都需要续费吗 html5网站欣赏 信息安全服务资质办理 上海卫士通网络安全有限公司 网络安全属于国家安全中的 信息安全 开源企业建网站多少钱 网站设计模板免费建站 北京高端网站制作 互联网营销工具有哪些 网站设计公司 北京 烟草行业信息系统安全等级保护与信息安全事件的定级准则 长安网站设计 北京高端网站制作 建个简单网站 沧州企业网站 中国网络安全教育 企业信息安全资质认证,-1 滕州网站优化 公司网站建设免费 珠海品牌网站制作信息安全等级保护的原则是,-1 成都网络营销哪家好 景县网站建设 php信息安全竞赛 外贸网站推广软件 衡水网站设计费用 东莞建网站 欧美风格网站设计 信息安全事态或事件 营销团队的介绍 下面不属于网络安全服务的是 打赏营销 中山市网络营销 网站注销 php信息安全竞赛 深圳h5网站公司 金融行业信息系统信息安全等级保护 深圳网站开发 网站改版seo 大连营销外包公司有哪些 2012网络安全问题 浪潮信息安全 自己电脑做网站 带宽 网站建设创意 企业信息安全资质认证,-1 网络营销工程师书籍 信息安全EAL 营销人物 营销型网站建设页面 虚拟化 企业信息安全 互联网营销广告语 下面不属于网络安全服务的是 网络营销管理的内容 滕州网站优化 关于网络安全的作文 简约网站 网站建设渠道合作 网络与信息安全技术 pdf 营销团队的介绍 2012网络安全问题 营销型网站建设 杭州网站优化公司 信息安全等级保护实验室 北京网站建设开发 互助网站制作公司 网络营销策划案河北大学信息安全专业 织梦dedecms网站热门关键词hotwords标签 贵阳网站建设公司 简约网站 网站建设空间 天津网站制作公司 信息安全资质分几级 大连 做 企业网站 信息安全企业合作 互联网营销项目 大良营销网站建设价格 虚拟化 企业信息安全 简约大气网站设计欣赏 常德网站优化 信息安全 笔记本 网站设计的评估 中国搜索提交网站 广州市天河区网站设计公司 站长工具网站关键词库的词不是自己提交的么?为什么会不断减少 信息安全互联网公司 中国网络安全教育 辽宁网站建设 网络营销外包推广服务 武汉企业制作网站 景县网站建设 沧州企业网站 大连 做 企业网站 政府系统信息安全 公安网络安全检查方案 移动信息网络安全汇报 信息安全博士干嘛 信息安全工程 第二版 中文版下载 网络安全品牌 2017网络安全周 上海 关于网络安全的总结 网络营销外包推广服务 沈阳网络营销资讯 瑞星网络安全 东莞网站设计制作 课程培训营销 做网站网络公司 骏域网站 企业信息安全资质认证,-1 2017网络安全周 上海 黄山网站设计 石家庄网站制作找谁 2017年9月网络安全月 成都企业网站建设公司 石家庄网站制作找谁 无锡做网站哪家好 中山市网络营销 最专业的手机网站建设 区块链 信息安全论文 赤峰网站建设 上海卫士通网络安全有限公司 信息安全EAL 交通标识用品适合网络营销吗? 网站设计的评估 课程培训营销 商贸行业网站建设公司 北京信息安全测评认证中心 做门的网站建设 网络安全议题信息安全认证培训公司 信息安全岗位分类 网站设计模板免费建站 网络安全渗透测试培训机构 禅城区做网站策划 最大的网络安全公司排名 营销竞争 网站建设改版 中山精品网站建设策划 信息安全等级保护实验室 衡水企业网站设计 信息安全工程 第二版 中文版下载 网络营销编辑方向 上海信息安全行业协会 信息安全等级保护实验室 营销的坏处 信息安全等级保护 测评,-1 重庆网络营销价格 网站价钱 长春长春网站建设网 互助网站制作公司 深圳企业网站公司 无锡做网站哪家好 重庆专业的网站建设公司 金融行业信息系统信息安全等级保护 网络营销的具体内容 辽宁网站建设 信息安全 笔记本 网站制作素材 专业的内蒙古网站建设 建个网站整合营销传播的条件 网络营销管理的内容 赵县网站建设 衡水网站设计费用 网络安全论坛主题 金融信息安全体现在哪些方面 大学生营销 景德镇网站建设 南川网站制作 互联网营销精髓 大型网站设计方案 网络营销工程师书籍 最大的网络安全公司排名 信息安全管理专员 广告与营销的区别与联系 网站价钱 关于网络安全新闻 广西网站建设 网站设计的评估 中国人民解放军信息安全测评认证 广西网站建设 大型网站设计方案 网络营销的基础与实践报告 宝安网站设计 长春长春网站建设网 虚拟化 企业信息安全 营销团队的介绍 广东信息安全学院 北京网站建设开发 中国网络安全教育 网络安全品牌 大连营销外包公司有哪些 禅城区做网站策划 信息安全互联网公司 深圳网站开发 大良营销网站建设价格 信息安全资质分几级 网络营销的具体内容 做网站网络公司 第三方营销资源平台 烟草行业信息系统安全等级保护与信息安全事件的定级准则 政府系统信息安全 网络营销工程师书籍 公司网站建设免费 信息安全事态或事件 中山市网络营销 广东信息安全学院 织梦dedecms网站热门关键词hotwords标签 骏域网站 网络营销外包推广服务 滕州网站优化 信息安全 开源企业建网站多少钱 网络营销外包推广服务 国家网络安全日是哪天 关于网络安全的作文 互联网营销项目 欧美风格网站设计 中国搜索提交网站 杭州网站优化公司 建个简单网站 信息安全博士干嘛 营销型网站建设页面 网站都需要续费吗 信息安全资质分几级 深圳h5网站公司 手机网站制作服务机构 2014信息安全事件,-1 南川网站制作 东莞网站设计制作 网站建设渠道合作 衡水企业网站设计 沧州企业网站 网站建设创意 商贸行业网站建设公司 营销体系包括 下面不属于网络安全服务的是 营销型网站建设 互助网站制作公司 建个简单网站 营销主题? 信息安全工程 第二版 中文版下载 浪潮信息安全 互联网营销广告语 网站改版seo 上海卫士通网络安全有限公司 简约大气网站设计欣赏 衡水网站设计费用 营销体系包括 2012网络安全问题 长安网站设计 公安网络安全检查方案 广西网站建设 网络安全议题信息安全认证培训公司 试述网络营销的劣势 网络安全论坛主题 东莞网站设计制作 天津网站建设 深圳企业网站公司 零售网站建设 网络营销编辑方向 深圳企业网站公司 openssl与网络信息安全 下载 最大的网络安全公司排名 网站设计的评估 如何选择佛山网站建设 专业的内蒙古网站建设 网站设计公司 北京 信息安全互联网公司 政府系统信息安全 南川网站制作 广西网站建设 网络安全渗透测试培训机构 信息安全岗位分类 景德镇网站建设 区块链 信息安全论文 龙岩建网站 金融行业信息系统信息安全等级保护 黄山网站设计 赤峰网站建设 中国平安信息安全部门 信息安全保护等级测评标准