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
国内主流信息安全厂商国家网络与信息安全信息通报机制技术支持单位信息安全资质包括哪些内容网站页面设计gb t 信息安全网站架设信息安全 咨询信息安全市场 idc厦门 做网站网络安全安全专业模板网站的好处杨凡最近很倒霉。 还做怪梦,梦见已故多年的爷爷让他烧纸钱,收快递。 然后他便真的收到了一个寄件人是爷爷名字,寄出地址写着阴曹地府的快递。 从此,杨凡一边修仙,一边沉浸在烧纸的乐趣中,纸钱、纸人、纸车、纸别墅、坦克、飞机…… 对此爷爷表示非常满意,反手给他寄了一堆阴间特产,功法、丹药、法器、符箓、鬼物…… 爷爷:吾孙天纵奇才,有大帝之姿! 杨凡:不为别的,我只是孝顺而已!以另一个视角(陶南)面对生活的世界的巨大变化 初始之地,在宇宙大爆炸之后诞生的一个大星球,混沌时代初,混沌大神盘古出现,混沌初开,混沌时代中期,混沌大神死亡,化身为三千魔神,从此,启三千神魔大战,导致初始之地破裂为无数星球,围绕最大的星球初始之地运行,三千神魔分别占领一方星球,混沌时代末,三千神魔死亡,混沌时代结束。蛮荒时代开启,无数世界开始出现各种文明,这些世界被人们依据大小和实力强弱分为三千小世界,十八中世界,两大世界(初始之地,冥界),各世界均有产生一些顶尖强者,传说有的已经超过了三千魔神的层次,无限接近或达到了盘古大神的层次。 天玄大陆就是三千小世界中的其中一个小世界,实力巅峰时候可以排进中世界前十,出现过很多顶尖强者。 十二中世界分别是龙界,凰界,鬼界,尸界,魔界,虫界,佛界,妖界,神魔大陆,丹界以及拥有各种天火的天火大陆。死亡,也许只是新的开始...送快递的穷屌丝楚风,为了借钱给母亲看病,无意中得到仙尊的衣钵传承,从此开始了不一样的人生。 他法术救人,仙法御敌,战妖兽,平恶徒,不仅笑傲人间武道,更是登上了世界的巅峰,至高的神途。 生死看淡,不服就干。 没有什么是一顿打解决不了的,如果有,那就两顿。穿越洪荒,成为帝俊和东皇太一长兄。 深知后世巫妖量阶走向的道尘,当即决定带着两个小老弟,闭关太阳星,打死不踏出一步。 自此洪荒天机发生变化,妖族无主,巫族一家独大。 圣人一个脑袋两个大。 鸿钧:你出关,圣位灵宝随你挑。 洪荒大妖:求求你出关吧,巫族太凶了。 系统:宿主求求你出关吧,三清和十二祖巫,人头打出狗脑子了。 道尘:不存在的,等我再闭个十个八个元会再说。 林青是云城市的重案组成员,是出了名的两面派!对待任何人和事都有不同的态度。一系列的诡异事件发生,随着案件的发展让事件浮出水面,背后的真相让人不敢想象!世界崩坏,风云将起。各方涌动,群雄四起。这个世界怎么了,谁又可终结一切? 顾楠穿越平行世界,此世文娱不复前世繁华,正值百废待兴之际。   一首歌,顾楠拉来千万投资!   执导第一部电影,轰动整个娱乐圈!   导演、写歌、小说……   以前世文娱之繁华,顾楠创建了此世最富有盛名的文娱帝国!星运大陆,一个修习星能量求道成仙的世界。天地混沌,世界突现神秘空间,共有九重。来自第九空间的神秘力量,困住众神,颠覆世界。魔兽横行。 一个流浪子,从此走上了,修习星能量,拯救众神,使世界重新恢复和平的道路。
长沙专业网站建设团队 2015年工业控制网络安全态势报告 网络安全实验室 设备 厦门 做网站 信息工程大学信息安全 徐州网站二次开发第四届广东省网络安全 三级信息安全等级保护,-1 富阳做网站 网络安全网页 网络安全安全专业 家宅磁场咨询【www.richdady.cn】 前世老公【www.richdady.cn】 孩子学习不好的心理调适咨询【www.richdady.cn】 脑部不清晰的前世记忆【www.richdady.cn】 忧郁症的前世记忆咨询【www.richdady.cn】 阴间生活的前世影响咨询【微:qq383550880 】√转ihbwel 与老公前世的故事分析【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 精神不振的前世因果【微:qq383550880 】√转ihbwel 如何应对冤亲债主的干扰?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 儿子抑郁症的案例分享【企鹅383550880】√转ihbwel 婴灵的超度方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 暗恋的心理成长威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的家庭氛围【微:qq383550880 】√转ihbwel 冤亲债主干扰对生活有哪些影响?【企鹅383550880】√转ihbwel 与男友前世的前世修行【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与男友前世的影响分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世老婆的前世缘分【微:qq383550880 】√转ihbwel 去世的父亲的前世解析【www.richdady.cn】√转ihbwel 迟缓儿的案例分享【www.richdady.cn】√转ihbwel 事业不顺的原因有哪些?咨询【σσЗ8З55О88О√转ihbwel 安徽网络营销 网络安全情况 2017金融网络安全 云平台网络安全 宜昌做网站 酷炫给公司网站欣赏 信息安全分几大类 网络安全运营管理 网络营销咨询 网站模板和定制的区别 诺一品牌营销 佛山网站建设公司网络营销网站 上海网站建设公司 信息安全专业 macbook 营销方案技巧 大学生网络信息安全 长沙专业网站建设团队 信息安全等级在哪查询 信息安全等级保护的测评工作中应如何规范行为规避风险 福州公司网站建设 中国网络安全问题 如何构建一个网站 社会化口碑营销 信息安全领域知名企业 国家实施网络安全 制学网网站 网站的版式 代发营销电商营销服务 信息安全 漏洞 网站架设 铁岭网站建设 信息安全分级系统自查 信息安全等级保护工作面临的形势,-1 2010年网络营销大事件 搜索引擎营销包括什么作用 福州公司网站建设 自制公司网站 手机网站空间 手机网站空间 厦门 做网站 信息安全网络大会 2015年工业控制网络安全态势报告 信息安全 咨询 泰安市营销 长安网站建设多少钱 网络安全人员能力认证 网络信息安全主动防御 信息安全研究中心 网络安全服务相关国标 php网站设计 中国公安局网络安全 网络安全网页 信息安全市场 idc 最优秀的佛山网站建设 网络营销系统功能 一般网站有哪几部分构成 推广型网站 高级设置 网络安全 信息安全资质包括哪些内容网站页面设计 上海网站建设公司 网络信息安全等级保护 信息安全研究中心 上海网站建设公司 信息安全市场 idc 邵阳网站优化 信息安全 西安 企业 信息安全管理体制 网络安全评估公司 信息安全与保护条例 信息工程大学信息安全 关于网络安全主持稿 网络安全基础 华为网盘 济南专业做网站 营销型手机网站 自己创网站 下面哪些不是基本的网络安全防御产品 宣传类网站 富阳做网站 公共网络安全服务平台 信息安全 漏洞 网络营销咨询 上海信息安全技术公司 信息安全等级在哪查询 gb t 信息安全 营销方案技巧 兰州网站建设|兰州网站制作|兰州网站设计公司|兰州网络公司 网络安全动态分析报告 信息安全资质包括哪些内容网站页面设计 上海信息安全公司 营销外包价格 兰州网站建设|兰州网站制作|兰州网站设计公司|兰州网络公司 电影网络营销推广公司 商城网站要怎样设计 电话营销策 电影网络营销推广公司 信息安全业务 清华本科信息安全 免费网站域名申请 如何构建一个网站 推广型网站 计算机病毒与网络安全 做网站实例 营销解决方案 网站架设 手机版网站制作 网络安全架构师 古典风网站 京东的市场营销战略 全面解读网络安全法二 邵阳网站优化 小米公司内容营销分析报告 手机网络营销怎么做 php网站设计 长安手机网站建设 搜索引擎营销包括什么作用 美团采用什么营销模式 信息安全专业 macbook 全球华人网络安全大赛 上海信息安全技术公司 福州公司网站建设 诺一品牌营销 公众微信绑定网站帐号 全球华人网络安全大赛 html 5+css 3网页设计与网站布局 从新手到高手 网络安全基础 华为网盘 四平做网站 瑞昌网站建设 分析营销环境 网络信息安全技术措施 信息安全领域知名企业 我国网络安全技术 网站酷站 长安网站建设多少钱 2017金融网络安全 产品型网站 南通网站优化 信息安全管理体制 宜昌做网站 国家网络安全管理局 深圳网站设计制作 网络安全漏洞 网络安全泄密档案 长沙专业网站建设团队 长安网站建设多少钱 自己创网站 网络安全宣传周信息 网络营销从事工作内容 有关建设网络安全的文章 许可email营销怎么做 信息安全 咨询 潍坊网站建设公司电话 网络安全运营管理 双色调网站 上海信息安全公司 信息安全 咨询 中国网络安全问题 信息安全风险管理系统 郑州做网站汉狮网络 铁岭网站建设 泰安市营销 深圳网站设计制作 手机网站空间 分析营销环境 信息安全分级系统自查 信息安全应急处理服务资质认证 信息安全 漏洞 信息安全工程师软件 国家网络安全管理局 北京信息安全行业协会 重庆企业网站建设哪家专业 南昌建网站单位 公司手机网站设计 泉州网站制作 社会化口碑营销 网络安全黑白之道 信息安全征文,-1 信息安全网络大会 南昌个人做网站 棕色网站 信息安全等级保护工作面临的形势,-1 网站试运营 网络营销发展分析报告 第二届国家网络安全宣传周 上海网络营销 国家网络与信息安全信息通报机制技术支持单位 铁岭网站建设 最优秀的佛山网站建设 如何改变网站首页栏目 南通网站优化 我国网络安全技术 恶意刷网站 如何构建一个网站 公司手机网站设计 城阳网站建设 泰安市营销 产品型网站 信息安全分几大类 网络安全服务包括哪些内容 网站酷站 模板网站的好处 网络营销发展分析报告 网络安全人员能力认证 大学生网络信息安全 重庆涪陵网站建设 网络安全.pdf 2010年网络营销大事件 厦门 做网站 三级信息安全等级保护,-1 网站的版式 信息安全分几大类 全面解读网络安全法二 b2c网站建设 广州 公共网络安全服务平台 天津云盾信息安全技术有限公司 安徽网络营销 免费网站域名申请 富阳做网站 网络安全漏洞 信息安全专业 macbook 南京设计网站 网络安全动态分析报告 古典风网站 推广型网站 佛山网站建设公司网络营销网站 重庆涪陵网站建设 下面哪些不是基本的网络安全防御产品 网络安全基础 华为网盘 信息安全工程师软件 手机网络营销怎么做 网络安全情况 城阳网站建设 计算机病毒与网络安全 天津云盾信息安全技术有限公司 gb t 信息安全 网络安全情况 济南专业做网站 营销解决方案 网络安全运营管理 济南专业做网站 公众微信绑定网站帐号 云平台网络安全 电影网络营销推广公司 制学网网站 信息安全研究中心 小米公司内容营销分析报告 信息安全管理体制 网络营销咨询 ga/t1177-2014 信息安全技术 第二代防火墙安全技术要求 中国公安局网络安全 推广型网站 代发营销电商营销服务 信息工程大学信息安全 模板网站的好处 免费的企业网站 上海信息安全公司 网络信息安全等级保护 最优秀的佛山网站建设 京东的市场营销战略 网站架设 2010年网络营销大事件 瑞昌网站建设 网站模板和定制的区别 清华本科信息安全 餐饮网络营销策划方案 唯品会营销 美团采用什么营销模式 南昌个人做网站 手机版网站制作 产品型网站 一般网站有哪几部分构成 手机版网站制作 瑞昌网站建设 大学生网络信息安全 哪里的佛山网站建设 柳市做网站 电话营销策 长沙专业网站建设团队 北京信息安全行业协会 php网站设计 网络安全安全专业 信息安全等级在哪查询 关于网络安全主持稿 信息安全市场 idc 做网站实例 信息安全等级保护的测评工作中应如何规范行为规避风险 网络安全基础 华为网盘 诺一品牌营销 商城网站要怎样设计 兰州网站建设|兰州网站制作|兰州网站设计公司|兰州网络公司 北京推一把网络营销 信息安全管理体系实施案例及文件集 邵阳网站优化 高级设置 网络安全 三级信息安全等级保护,-1 京东的市场营销战略 南昌个人做网站 b2c网站建设 广州 网络安全实验室 设备 信息安全与保护条例 网络安全病毒逻辑实例 企业信息安全审计表 信息安全资质包括哪些内容网站页面设计 信息安全等级保护工作面临的形势,-1 长安网站建设费用 餐饮网络营销策划方案 中国网络安全问题 网络安全.pdf 网站的版式 网络安全黑白之道 网络安全架构师 自己创网站 城阳网站建设 搜索引擎营销包括什么作用 信息安全分级系统自查 信息安全等级备案 网站模板和定制的区别 第二届国家网络安全宣传周 大学生网络信息安全 双色调网站 网络安全人员能力认证 全球华人网络安全大赛 网络安全黑白之道 自制公司网站 网络安全泄密档案 恶意刷网站 手机网络营销怎么做 深圳网站设计制作 信息安全分几大类 我国网络安全技术 信息安全等级保护工作面临的形势,-1 酷炫给公司网站欣赏 北京信息安全行业协会 手机网站空间 福州公司网站建设 广西信息安全测评中心 制学网网站 国家网络安全管理局 如何改变网站首页栏目 上海网络营销 郑州做网站汉狮网络 厦门 做网站 分析营销环境 信息安全网络大会 信息安全管理体系要素 网络营销从事工作内容 产品型网站 小米公司内容营销分析报告 信息安全 漏洞 徐州网站二次开发第四届广东省网络安全 餐饮网络营销策划方案