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
企业网站必须实名认证秦皇岛网站开发公司营销号推广报价网络安全系统公司信息安全 咨询网络安全国家标准大全网络信息安全部成员网站设计 广西国家网络安全应急处理日照网站优化网络营销的基础知识身患绝症的叶文偶得太极拳的真传,并且觉醒了弘扬武学系统! 只要他用武学影响更多人,就能获得积分,兑换顿悟机会,获得各种高阶武学! 甚至,治好自己的病。 从此,叶文开启了他的练武直播! 拳震所有武林宗门,脚踏世间不服之人! 只有你想不到的招式,没有我治不了的高人! 所有人都要恭恭敬敬地,在键盘上叫一声“武神”。 叶文:“货真价实的太极拳要不要学?飞檐走壁的梯云纵要不要了解一下?不要?早晚你要跪地求着我要!”我是一名精神科法医,最近我们小区命案频出。 间谍是一个非常古老的职业,从有战争开始的那一天起,间谍便是交战双方获取对方情报的唯一选择。有人说,间谍战是这个世界上唯一不会出现硝烟的战斗,可事实证明,没有硝烟的战斗在这个世界上几乎不存在,即便是暗地里的较量,同样充满血腥和牺牲。 我姓唐,叫唐城,你也可以叫我唐五郎。 我爹是军统,专门抓日本特务的军统,虽然他不在了,可小爷我也绝对不允许你们这些萝卜头活的逍遥。 这里是国统区,所以,这里没有你们存活的空间。如果你们非要来,那好吧,小爷我只好送你们统统下地狱。苏祈因为玩了一次笔仙游戏就被拽进了一个诡异的门后世界…… 这个世界,没有规则,没有对错,除了活着,没有别的选择。 轮回的教室,充满了笑声的楼梯间,尸块堆积的地下仓库。 同学接二连三的惨死却引发了更大的祸端,大门仍然是关闭的,游戏仍然在继续。 只有苏祈知道,自己病了,病的很重。 当他彻底无法控制病症之后,整个诡异世界,都会感受到真正的恐怖……我一心求死却屡次被迫重生,奈何我这能选择再次踏上征途! 屠苍生~戮万物~踏天道~~~这是一个御兽为主的世界。 遮天蔽日的钢铁飞龙,呼风暴雨的雷霆巨鸟,纵横荒野的大地龙骑...... 而他楚辞却有着不属于这个世界的御兽,而是神奇宝贝世界中的宝可梦。 一只小火龙! 这就要从脑海里一个神秘空间说起了,在那里只需吸收晶核的能量就可兑换宝可梦,精灵球,能量方块等等神奇宝贝世界中的东西。 就当楚辞想着能和小火龙问鼎世界的时候,他发现这个世界远远不止御兽那么简单。 铠师可以运用神纹技术打造炮艇。 真武者可以吸收真兽的能量汲取兽魂,便可运用真兽般强大的身躯和毁天灭地的灵能。一天晚上我的小女朋友想要我打电话给她讲故事,于是我便随口编纂了一个关于熊猫的故事,可没曾想第二天早上我竟变成了一只熊猫!!!在这之后我作为一只熊猫称霸世界的传奇故事就开始了......一个喜好睡觉听歌的平凡高中生,在没遇到他之前是翱翔天空的鸟儿,但当遇到他之后变成了笼中雀 回首望去,数年光阴,因为一场顺手而为将二人紧绑在一起,这一绑就是永恒光阴……武周兴元十八年,燕王上书请绥远受灾速拨军粮事,但是两个小人物的出现却搅乱了燕王的计划,四品官员的离奇身亡,又引起朝堂的轩然大波,皇帝,藩王,皇子,大臣,谋士,一时间武周国风起云涌,波云诡谲;阴谋,阳谋,刺杀,屠戮,人人都为自己的目的不择手段。朝堂纷乱,国内动荡,外族觊觎,武周国能否迎来中兴之主?主角人物:左倾天 故事背景:,前役人族大帝陨落已有300多年,人类失去天生特性,又惨遭其他种族压迫,在这个时候,一位拥有万古绝世气概的男人左倾天站出来说:我要修练成大帝!夺回我们人族的尊严,然后再让其他所有种族都拜倒在我们脚下,我说到做到! 人物背景:左倾天出生在一个没落修真家族,但他从小受到爷爷的教育,做事只有不择手段才能最快达到目的,人要做就做万人之上,绝不要甘于人下,然而左倾天资质平平,只入了青华山青仙派山脚下做了一杂役弟子混混度日,直到一天,在一次竹林的任务中,偶然般的捡到了一现役入门弟子的令牌和其储物袋,在四处打听过其身份后,才安然代替其身份混入门派中。纵使我一身落魄,我亦要修炼。
最好网络营销公司 国际信息安全等级划分 旅游网络营销策划方案 秦皇岛网站开发公司 营销软件一站式服务 ctf网络安全 网站规划 网络安全系统公司信息安全 咨询 网络安全国家标准大全 网站怎么创建 性压抑咨询【www.richdady.cn】 耳鸣的案例分享【www.richdady.cn】 大龄剩女的婚姻建议【www.richdady.cn】 前世今生的奇妙经历【www.richdady.cn】 解梦的心理学意义咨询【www.richdady.cn】 发育倒退对孩子心理的影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 财运不佳的理财技巧有哪些?【www.richdady.cn】√转ihbwel “缺心眼”对人际交往的影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子压力大的案例分享咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 婴灵的化解方法【σσЗ8З55О88О√转ihbwel 内心恐惧胆怯的心理调适【σσЗ8З55О88О√转ihbwel 孩子不爱读书的家庭教育【企鹅383550880】√转ihbwel 邪灵的防范方法【www.richdady.cn】√转ihbwel 佛教视角下的前世今生威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心慌胸闷头晕的原因分析咨询【σσЗ8З55О88О√转ihbwel 孩子不爱读书的家长引导【微:qq383550880 】√转ihbwel 婴灵的超度仪式如何进行?【σσЗ8З55О88О√转ihbwel 前世今生的因果关系【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何克服升迁障碍?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 深圳 网站制作 flash网站制作教程 国家信息安全部大数据上市公司 华为网络安全合作公司 甘肃网站制作公司有哪些 许可营销工具 国家下一代互联网信息安全专项 网络营销的理论包括 重庆网站制作公司 信息网络安全事件 网站顾客评价 网络营销的基础知识 佛山网站设计公司 计算机网络安全现状及防范技术探讨 网站的设计、改版、更新 信息安全服务平台架构商城网站建设案例 网站规划 电商营销策划公司排名网络安全技术研究 专业开发网站公司 营销推广心得 杭州网络安全企业 中国石化信息安全 网站制作开发技术 南昌个人做网站 徐州网站二次开发 国家网络安全应急处理 网站的营销与推广方案怎么写 2016网络安全(中国)论坛 国瑞公司 信息安全 跨境网络安全预备案互联网软文营销案例 信息安全等级保护内容 危害国家信息安全的例子 广东省信息安全测评中心,-1 国家下一代互联网信息安全专项 app设计网站 网络安全法案 国瑞公司 信息安全 网络信息安全部成员 网站定制 天津 上海建站网站的企业 社会化网络营销基础 网络安全主题的文章 许可营销工具 营销流行语 营销产品定位 专业开发网站公司 网络信息安全等级保护制度 汕头网络营销 2016网络安全(中国)论坛 国家网络安全应急处理 信息安全等级保护内容 微信开发网站建设程序 网站的营销与推广方案怎么写 微商产品怎么营销方案 网站制作开发技术 网络营销直通车 专业开发网站公司 网站制作开发技术 网站的设计、改版、更新 手机打开一个网站说你的浏览器不支持javascrip 网站顾客评价 中国佛山营销网站建设 网上营销的品牌 网络营销能力秀词条 国家信息安全部大数据上市公司 网络营销目标怎么写 网络安全团队名称大全 旅游网络营销策划方案 网络安全 特训 复旦信息安全怎么样 上海网络营销 网络安全防御测试 ecshop网站里面有伪静态页面还有部分动态页面不是作弊吧 网络安全系统公司信息安全 咨询 大同网站建设 佛山网站设计公司 最好网络营销公司 cigital公司网络安全 网站视频主持人 甘肃网站制作公司有哪些 婚庆网站建设 3合1网站建设 产品型网站 网络营销调查方法 网站模板和定制的区别 如何维护网站 龙岗做网站 3g网站开发 网络安全信息化办公室 龙岗做网站 甘肃网站制作公司有哪些 营销解决方案 广东省信息安全测评中心,-1 网站的设计、改版、更新 外贸整合营销 企业网站必须实名认证 网络推广网络营销 中企动力制作的网站后台 危害国家信息安全的例子 信息安全性测试方法 中国信息安全奠基人 营销操盘手 公司网络安全的通知 网络信息安全工程师高级职业教育系列教程,-1 手机打开一个网站说你的浏览器不支持javascrip 营销活动培训 成都市网站建设 广州网站建设哪家比较好广西南宁市网站制作公司 深圳 网站制作 网站建设管理 浙江省网络信息安全 网络营销推广办法 网络安全主要功能 最好网络营销公司 如何维护网站 网络营销在酒店营销中的应用浅析[毕业论文] - 毕业设计 可信赖的南昌网站制作 网络安全主要功能 网络安全国家标准大全 深圳做网络安全公司排名 做网站要学什么 信息网络安全事件 网络安全周简介 巴中网站建设 网络营销专业技能 网站定制 天津 营销号推广报价 潜江网站建设 近年来互联网用户变化的情况分析而这些变化对企业网络营销的影响? 深圳品牌模板网站建设 近期国内信息安全事件 什么是网络病毒营销 社会化网络营销基础 眉山网站优化 婚庆网站建设 网络营销的基础知识 营销解决方案 app设计网站 昆明做网站哪家好 2014网络安全形势 潜江网站建设 如何优化网站 互联网传统营销模式有哪些 电子商务型网站 上海做网站的公 北京代建网站 跨境网络安全预备案互联网软文营销案例 营销流行语 信息网络安全事件 香港 信息安全,-1 网络推广网络营销 云计算与网络信息安全 网络安全法规 美国俄罗斯信息安全 中国佛山营销网站建设 flash网站制作教程 网站速度 营销产品定位 网站主机500m数据库至少要多大的呢?200可以吗? 2016网络安全(中国)论坛 热点营销 网络营销的理论包括 3合1网站建设 上海做网站的公 网站怎么创建 网络营销能力秀词条 ctf网络安全 梅州网站建设 产品型网站 网络安全主题的文章 网站的营销与推广方案怎么写 网络营销学概论 2016网络安全(中国)论坛 网络安全防御测试 许可营销工具 白城网站建设 我们常见的对信息安全的误区有哪些 合肥做网站 信息安全等级保护安全建设整改工作指南 外贸整合营销 美国俄罗斯信息安全 我们常见的对信息安全的误区有哪些 南昌个人做网站 营销授课南昌 危害国家信息安全的例子 网站模板和定制的区别 网络安全 特训 华为网络安全合作公司 德阳网站建设公司 紫色的网站 营销流行语 深圳自适应网站制作 营销推广心得 营销号推广报价 深圳做网络安全公司排名 国瑞公司 信息安全 网络安全法 解读 网站空间 中国石化信息安全 杭州网络安全企业 flash网站制作教程 2017信息安全企业 上海建站网站的企业 徐州网站二次开发 深圳自适应网站制作 诺一品牌营销 秦皇岛网站开发公司 网络安全系统公司信息安全 咨询 网络信息安全部成员 软文营销商业模式 企业微信广告营销策划 重庆网站制作公司 网上营销的品牌 网络营销推广办法 微信开发网站建设程序 软文营销商业模式 营销授课南昌 可信赖的南昌网站制作 中国信息安全奠基人 香港 信息安全,-1 上海网络营销 网络安全团队名称大全 信息安全实践 贵州网站制作哪家好 网站维护收费 网络安全专家评审 网站空间 网络安全信息化办公室 网站视频主持人 柳州建网站 微商产品怎么营销方案 中企动力制作的网站后台 国外网络安全社区 国瑞公司 信息安全 贵州网站制作哪家好 如何新建自己的网站 龙岗做网站 双色调网站 专业开发网站公司 营销活动培训 中国佛山营销网站建设 佛山网站设计公司 网络营销专业技能 网站建设合同 信息安全风险评估规范 淘宝大学营销免费课程 国家信息安全部大数据上市公司 最好网络营销公司 3g网站开发 网络营销调查方法 网络营销直通车 微商产品怎么营销方案 公司网络安全的通知 危害国家信息安全的例子 ecshop网站里面有伪静态页面还有部分动态页面不是作弊吧 学校网络安全机构 联通网络安全 上海网络营销 柳州建网站 中国佛山营销网站建设 浙江省网络信息安全 亚马逊服务营销策略 信息安全性测试方法 国家下一代互联网信息安全专项 信息安全等级保护内容 信息安全性测试方法 学校网络安全机构 复旦信息安全怎么样 网络安全国家标准大全 购物网站怎么创建 网络安全信息化办公室 网站规划 网站的设计、改版、更新 广州网站建设哪家比较好广西南宁市网站制作公司 营销软件一站式服务 cigital公司网络安全 网络营销目标怎么写 重庆网站开发商城 电商营销策划公司排名网络安全技术研究 深圳 网站制作 网络安全团队名称大全 网络营销在酒店营销中的应用浅析[毕业论文] - 毕业设计 紫色的网站 婚庆网站建设 网站建设i 营销授课南昌 手机打开一个网站说你的浏览器不支持javascrip 网站的营销与推广方案怎么写 大同网站建设 公司网络安全的通知 亚马逊服务营销策略 网站的设计、改版、更新 信息本身具有()等特性使信息安全容易受到威胁和损害. 深圳自适应网站制作 财务服务器的网络安全 信息安全风险评估规范 企业微信广告营销策划 财务服务器的网络安全 美国俄罗斯信息安全 营销操盘手 餐饮网络营销策划方案 杭州网络安全企业 建网站的公司哪家好 16年网络安全大事件 微网站首页 网站设计 广西 3合1网站建设 上海做网站的公 app设计网站 网络营销能力秀词条 ctf网络安全 梅州网站建设 双色调网站 网络安全主题的文章 网站的营销与推广方案怎么写 网络营销学概论 国家网络安全应急处理 网络安全防御测试 许可营销工具 德阳网站建设公司 我们常见的对信息安全的误区有哪些 网站没更新 汕头网络营销 热点营销 美国俄罗斯信息安全 广东省信息安全测评中心,-1 徐州网站二次开发 社会化网络营销基础 危害国家信息安全的例子 南昌个人做网站 16年网络安全大事件 国外网络安全社区 德阳网站建设公司 紫色的网站 cigital公司网络安全 网站制作开发技术 营销推广心得 营销号推广报价 深圳做网络安全公司排名 微网站首页 密码技术网络安全公司 网站空间 中国石化信息安全 网络营销目标怎么写 购物网站怎么创建 2017信息安全企业 上海建站网站的企业 徐州网站二次开发 上海网站建设联系电 诺一品牌营销