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
东莞长安网络营销招聘营销的概念网络安全引言网络营销方案主要内容企业成功营销策略案例上海网站制作中国信息安全办河北信息安全认证中心公司在保护公司信息安全烟台网站建设联系电话魔妖恶怪、能人异士、超凡科技……随着黑日黑月的出现,这些隐藏在暗中的事物纷纷出现。这里,充满了危机与风险;这里,充满了宝藏和奇遇…… 但我祝天佑注定不是这个画风! 奇珍异宝?我的!灵丹妙药?我的!美人江山?也是我的! 横行天下,靠的是风骚的操作,靠的,也是天神的血脉!焱朝衰微,天下动乱。昭以天命一步步称王称帝,一统天下。男主人公沐无言出生低微,却能出将入相,为昭国之栋梁之才……空气中竟含有限制生物进化的慢性病毒?!大气层是阻碍生物吸收宇宙能量的囚笼?!有外星文明针对地球?!2222年的2月22日,经过几百年的研究,地球人类研究所发表了一个个令人三观彻底颠覆的结论。在所有人的惶恐不安中,几百年后,研究人员发现空气中的病毒慢慢消失了,从那以后,一切好像都变得不一样了…… 运筹帷幄算天下,一身修为定乾坤 以凡躯肉体血染苍穹,以无双智计扭转数国时局 震乾坤,逆生死 得至宝,夺造化 破万界,立天道 练就无上神通,击败无数强者,屹立在天道之上,自创天道,沐浴万灵,即是创天主宰。 灵修之道,不外乎,纳灵化旋,聚雾凝液,固晶结丹,筑台合道,九转涅槃;万古之劫即将再次袭来,天地能否逃脱这次灭世大劫,在乎巅峰也!世纪交际,魑魅降世,铁蹄摧骨,爪牙喋血。 为了抵抗这些嗜杀的恶魔,人类锻造了自己的铠甲,名之假面骑士,组建同盟,御敌守土。 这个汇集精锐,背负人类全部希望的组织,便是骑士联盟。 20年的浴血奋战,不计其数的先烈以血肉之躯,筑起钢铁城墙,将那些怪物阻挡在战区的铁壁之外。终于,敌寇似是偃旗息鼓,世间仿佛重获平和。 20年后,一个失忆的青年,加入了这个组织。他不知道自己是谁,却能够与一条雪藏十余年之久的骑士系统意外匹配。 他也不知道,自己的身上埋藏了多少秘密,经历了几多坎坷,又背负着多少人的期许,暗含着何其残忍的阴谋。 战斗旷日持久,秘密逐一揭示。 彼时,谁都不曾设想,暗流涌动,会在有朝一日化为汹涌浪潮,将这粉饰的太平,尽数吞没。 联盟之下,或许远没有世人所看到的这般祥和。“祖师,您在等什么?” “第三柄圣器出世,不,准确的说是在等第三个持圣器之人出现!” “为什么?” “屠神!”仙之巅,傲世间,唯有叶玄唯有剑。 大河之剑天上来,一剑横天震世间! 破红尘,杀尽仙,一剑在手斩九天。 倘若世间无真仙?吾愿持剑化为仙!大荒里不知名的小村子,几位少年从这里走出,开启属于他们的传奇人生。 黑暗中的幕后者从沉睡中苏醒,天地棋盘悄然展开,一切才刚刚浮出水面……东汉末年,汉室崩塌。 刘闲意外穿越到这乱世,开始一段传奇人生。 利用遥遥领先这个时代的知识,收名将,戏红颜,混的风生水起。 同时训练出一支傲视当世的铁血精锐。 刘姓为王,大浪淘沙。 待一切尘埃落定之后,一个完全不同的大汉帝国重新出现在了大地的东方。
旅游电子商务网站的建设包括哪些步骤?网站建设中有哪些常用技术? 手机网络安全会议2017 行业网络营销现状 黑客转网络安全师 网络安全引言 如何建网站 上海网络安全局 邢台网站定制linux网络安全技术... 网站升级改版 东莞外贸网站推广 公司破产后的员工安置问题咨询【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 财运不佳的财富规划【企鹅383550880】√转ihbwel 耳鸣的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何识别外灵干扰的症状【企鹅383550880】√转ihbwel 大龄剩女的婚恋现状如何改变?咨询【σσЗ8З55О88О√转ihbwel 投资项目的自我提升【σσЗ8З55О88О√转ihbwel 前世缘份的前世影响咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的改运方法咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 祖灵的祭祀方法【www.richdady.cn】√转ihbwel 长期头脑混沌可能是哪些疾病的前兆【www.richdady.cn】√转ihbwel 升迁障碍的真实案例有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 营销e术 岳阳网站建设 教育行业网络安全现状 郑州网站设计 每周网络安全 西安营销师 在线营销工具包 深圳 企业 网站建设新闻类营销 外贸网络营销主要营销方式 网络安全表格加密实验 餐饮互联网营销 案例 信息与网络安全防范技术 网络营销模式有几种 中国信息安全专家 网站升级改版 营销的概念 企业成功营销策略案例 河北信息安全认证中心 设计网站考虑哪些因素 一个完整的信息安全保障体系包括 个人网络安全设计方案 网络安全平台价格 网络营销是 网上营销 前端营销 江苏 信息安全技术有限公司 网络安全 日志分析 与信息安全管理相关的工作有 营销机构图 目前国家信息安全形式 429网络安全日 2017 网络安全引言 浙江营销策划 在线营销工具包 小龙虾网络营销方案 网络安全感知 小区社群微信营销 无锡网站建设哪家专业 临沂网站优化 郑州网站建设案例 跨境电子商务营销推广 临沂网站优化 微博口碑营销案例 如何建网站 网络安全案例ppt 湖南微信网站营销 顺的网站建设咨询 ruby开发 信息安全 网络信息安全 考试系统 网站都需要续费吗 网络安全隔离交换技术 国外的app设计网站 全国网络安全信息大会 知道创宇信息安全 新媒体营销的收入 网络与信息安全有哪些 烟台网站建设联系电话 营销推广服务 整合营销运营 病毒营销的发展趋势 ruby开发 信息安全 互联网营销是做什么的 深圳市能士信息安全公司 计算机网络安全的访问控制技术主要有基于 南宁网站建设教学 个人网络安全设计方案 关于企业网站建设的必要性 杜跃进 信息安全 旅游电子商务网站的建设包括哪些步骤?网站建设中有哪些常用技术? 南宁网站建设教学 网络安全关注的问题有哪些 涪陵网站建设 外贸网络营销主要营销方式 网络安全关注的问题有哪些 信息安全与管理 新媒体营销的收入 网络安全产品分类 微博口碑营销案例 成都网络安全现状 浙江营销策划 小龙虾网络营销方案 网站建设教程浩森宇特 营销的概念 教育行业网络安全现状 传播营销 营销 老师 珠海网站设计报价 网络营销对全球影响 如何建网站 网站开发合同学院网站规划方案 网络营销培训公司 网络安全.信息安全 信息与网络安全防范技术 网络营销在我国的发展现状 国家网络安全标准化 教育式营销 梦想网络安全技术论坛 信息安全咨询师 设计网站考虑哪些因素 我国网络安全漏洞管理 网络安全 知识点 梦想网络安全技术论坛 南通网站建设空间 网络安全隔离交换技术 营销网站的筛选 中国信息安全专家 一个完整的信息安全保障体系包括 网站推广的好处 杭州市网络安全平台 信息安全与管理 通过网络安全培训 信息安全 课堂 长沙微信网站制作广州品牌设计网站建设 对信息安全管理威胁最大的是 岳阳网站建设 仙桃网站建设 郑州网站建设案例 郑州网站设计 网站免费认证 怎么建立个人网站 西安营销师 网站管理公司 白帽学院 信息安全 深圳 企业 网站建设新闻类营销 公共信息网络安全监管 营销机构图 网络安全表格加密实验 河北信息安全认证中心 前端营销 信息与网络安全防范技术 信息安全风险评估的一般步骤 顺的网站建设咨询 中国信息安全专家 网络营销模式有几种 上海网站制作