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
cog信息安全专业委员会网络安全的保护技术信息安全教育机构山西信息安全管理中心电商营销课程培训课程重庆网站建设 优化深圳能士信息安全有限公司《家装公司营销教程》网络推广微信营销公司win8 网络安全天界的姐妹凤琉璃和白子婧受天帝的嘱托下凡观察魔族的一举一动,在此期间遇见了千年之狐墨阳轩和贝城轩,双方合作一起除掉魔族,而墨阳轩一见钟情,爱上了凤琉璃,白子婧和贝城轩俩个人日久生情,东海龙王的女儿辰萱晗也请求天帝让自己去帮助琉璃她们,辰萱晗下凡之后一直在帮助琉璃她们解决烦恼,后来,辰萱晗想出去走走,告别了琉璃她们之后就走了,在外的时候意外救了凡间的大将军顾晟,两个人就此开启了瓜葛,姐妹三人在感情的道路都历经坎坷,好在对方都没有放弃和对方在一起,成功地消灭魔族之后姐妹三人分别带着对方回去了闯入异世界,一路风景,一路风云。 为师复仇,为兄赴义,为爱天下敌。 少年身负血毒,一人一马,执刀横天下。 命运多舛的少年,不谙世事的灵智,两者的结合在九州大陆掀起了阵阵腥风血雨。 在这里也许会看到华夏神话的延续,也许会看到超强的灵宝,也许会看到上古遗迹,也许会看到各种稀奇古怪的异兽,也许会看到魔之本相……地球少年雷奇穿越海贼世界,意外拜卡普为师,习得霸者铁拳。 看雷奇如何叱咤大海,助路飞称王。重生回到1996的男主肩负拯救国足的重任,同时还要寻找自己的挚爱. 不到18岁就称为国足第一球星,接下来看男主如何征服欧罗巴,带队为国家荣誉征战世界杯赛场. 踢球的同时还建立了庞大的商业帝国,搞青训,执掌国足帅印,入主足协. 一路成长还要遇见各种随机的副本一样的事件,警匪?武侠?仙侠? 应有尽有! 抛妻弃子,间接害死了全家,李文军在懊悔中孤独生活了四十年后重生回到1980年。 这一世,他要做实业振国兴邦,带领各行业把技术提前二十年; 这一世,他要弥补所有过错,让家人温饱不愁,平安喜乐。 做出第一部对讲机,拥有了自己矿山,带领开发房地产,钞票哗哗流进来。 赚钱,对他来说才是最容易的事情。 陈铁柱小时候是一个弃婴,被师父捡到抚养长大。 20岁那一年,师父告诉他,让他去下沙村做一名上门女婿。 师令难违,他一连做了5年的上门女婿,受尽了无数人的白眼,冷言冷语。 终于这一天,他爆发了.......一场灾变,让世界沦为秩序崩坏的废土。 有人栖身要塞,有人躲在荒原,还有人在辐射中变成了另外一种生物。 世界分割为两个极端,权贵们掌握着顶尖的科技,用一座座拔地而起的要塞将自己隔绝在乱世之外。 易子而食,危机四伏的流民区内,一名迫于生计的猎人,为了度过即将到来的凛冬,走向了一条披荆斩棘的道路。 在这艰险混乱的世道当中,一群草根出身的生死兄弟,逐渐让世界为之颤抖。九州神王李长青,被兄弟偷袭陨落,却意外重生归来。 尘封万年的洪荒大妖,将成为他的助力, 万界之中,修最强之术,炼顶尖灵药,布绝妙大阵…… “前世我能登临巅峰,这一世我也一样可以,诸天万界,终有一天,我会卷土重来!” 一座平平无奇的小中学,却隐藏着许多不,寻常的人…… 末日即将来临他们不得不出山去拯救世界……………………
公众号营销有哪些策略 国家信息安全工程技术中心,-1 信息安全人才 网络安全专家 网站建设步骤 中国网络安全监测中心 国内全屏网站有哪些 陕西营销型网站建设公司 媒体营销是什么 网络安全推荐 婴灵的超度与心灵净化咨询【www.richdady.cn】 与女友前世的前世解析【www.richdady.cn】 心特别累的心理调适咨询【www.richdady.cn】 事业不顺的心理调适【www.richdady.cn】 精神不振的原因分析【www.richdady.cn】 事业不顺的心理调适咨询【企鹅383550880】√转ihbwel 婴灵的安抚有哪些实用技巧?【σσЗ8З55О88О√转ihbwel 如何解决事业不顺的问题?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何发现前世缘份【微:qq383550880 】√转ihbwel 不爱读书的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 小企业破产的主要原因咨询【微:qq383550880 】√转ihbwel 外灵干扰的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 忧郁症的原因分析【企鹅383550880】√转ihbwel 前世缘份如何影响事业发展?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 自闭症的康复训练咨询【www.richdady.cn】√转ihbwel 自闭症的家庭支持咨询【σσЗ8З55О88О√转ihbwel 干扰的常见类型【微:qq383550880 】√转ihbwel 查财运专业服务咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 改善亲子关系的技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的父亲的去向解析咨询【微:qq383550880 】√转ihbwel 如皋网站制作 温州网站优化 2014信息安全峰会 怎样学营销 信息安全队,-1 电商营销课程培训课程 上海定制网站建设公司 广州网站制 信息安全 软件安全实验报告 侵犯信息安全罪 一流的成都 网站建设 网站信息安全等级测评保护 杭州高端定制网站 互联网营销工作简历 移动营销的劣势 南通哪里有做网站的 网站乱码 传统营销经典案例 网站推广服务 淄博网站建设 南京信息安全公司排名 建国内外网站有什么区别 网站改版升级总结 网络安全工作西安 网络安全资讯 许可email营销的功能 网站设计太原 电商营销可以自学吗 病毒营销的方案 网络营销数据的来源 国家信息安全管理办法 中国网络安全监测中心 传统营销模式的优点 网络安全事件简述 信息安全等级保 南京网站制作信息安全就业好吗 请下载《网站备案信息真实性核验单》打印并按样例提示填写 快餐4p营销组合策略 广州 信息安全公司 信息安全 软件安全实验报告 默网络营销 第三方营销平台的发展趋势 纳税人信息安全管理 软件系统信息安全建设方案,-1 国内全屏网站有哪些 营销策划皮包公司 厦门网站建设 网络营销运营专员 温州网站优化 网络安全知识ppt 网络安全事件处理报告 数据中心信息安全系统 信息安全队,-1 病毒营销教程 网站改版升级总结 上海定制网站建设公司 信息安全人才 重庆微博营销公司 信息安全 软件安全实验报告 对网络安全的理解 网络安全培训感想 一流的成都 网站建设 请下载《网站备案信息真实性核验单》打印并按样例提示填写 《家装公司营销教程》 杭州高端定制网站 房地产网上营销 网络安全专家 移动营销的劣势 东莞网站建设服务公司 植入式营销特点新疆网站制作 网站乱码 信息安全事件通报流程 饥饿营销双刃剑图片 网站推广服务 营销神器 信息安全检测能力 南京信息安全公司排名 信息安全等级保护标准体系遵循以下原则:() 网络营销运营专员 网站改版升级总结 win8 网络安全 饥饿营销双刃剑图片 网络安全资讯 天津市信息安全测评中心 凡客建网站 网站设计太原 重庆商城网站制作报价用公共网络安全吗 公众号营销有哪些策略 病毒营销的方案 中山网络营销 重庆微博营销公司 网站设计的优点和缺点 植入式营销特点新疆网站制作 网站前台 企业网站个人可以备案吗 昆山网站 信息安全等级保 如何宣传网络安全 职场信息安全 信息安全队,-1 企业网络安全评估 温州优化网站 信息安全中常见的攻击,-1 网络营销的作用意义 信息安全管理三个要素 奶粉微信群营销方案 信息安全风险评估指标 网络安全日郭启全致辞 银川怎么做网站 揭阳网站建设 揭阳网站建设 信息安全等级保 重庆整合营销那家靠谱 信息安全管理三个要素 宣传营销 陌陌营销工具 南京网站制作信息安全就业好吗 网络安全安全大会2015 重庆营销推广哪里好 网络营销客户跟进系统 信息安全国家标准目录 网站建设步骤 中山网络营销 广东中山市做网站单位网络安全要求 温州优化网站 建手机网站一年费用 无纸化营销 阿里云信息安全 互联网营销赚钱吗 广州 信息安全公司 对网络安全的理解 凡客建网站 软件系统信息安全建设方案,-1 长沙营销型网站设计 通信部门网站备案证明 重庆网站建设 优化 江苏 第三届信息安全技能竞赛 保护网络安全的常用手段有 app互动营销策划 :国家网络与信息安全中心 网络安全的保护技术 第三方营销平台的发展趋势 第三方营销平台的发展趋势 互联网营销赚钱吗 广州营销型网站优化 江苏 第三届信息安全技能竞赛 纳税人信息安全管理 公司网站定制 深圳企业网站开发 幼儿园网站设计 电商营销可以自学吗 网络安全通报实行 网络安全事件简述 信息安全 软件安全实验报告 网络营销出来有用没 温州网站优化 长沙营销型网站设计 网络营销目标包括哪些 南京信息安全公司排名 深圳能士信息安全有限公司 人网站建站 网络安全对社会的影响 网站设计的优点和缺点 南京网站制作信息安全就业好吗 传统营销经典案例 信息安全中常见的攻击,-1 互联网营销工作简历 网络安全法 研发安全 2014信息安全峰会 重庆网站建设 优化 电商营销课程培训课程 企业信息安全优化方案 网络安全 研究方法 信息安全检测能力 中国信息安全法律大会,-1 许可email营销的功能 广州网站制 快餐4p营销组合策略 kingcms php版 如何让生成的页面在网站根目录下 淄博网站建设 网站前台 网络营销前景好么 企业网络安全评估 中国信息安全测评中心属于 网站推广专家 池州网站设计保密网络安全检查 淄博网站建设 媒体营销是什么 信息安全防护现状评价 e营销网 营销策划皮包公司 建手机网站一年费用 随着网络安全 建国内外网站有什么区别 广东中山市做网站单位网络安全要求 深圳企业网站开发 公信部信息安全 通信部门网站备案证明 soc网络安全管理平台 信息安全技术 信息安全管理体系审核指南 网络安全知识ppt 信息安全等级分类 佛山新网站制作市场 怎么加入网络营销公司 媒体营销是什么 营销成交关键词 网络安全法 研发安全 随着网络安全 209国家信息安全专项 网络安全知识ppt 杭州高端定制网站 饥饿营销双刃剑图片 营销职能 陌陌营销工具 信息安全 顶级会议 国家信息安全工程技术中心,-1 网络安全推荐 上海定制网站建设公司 池州网站设计保密网络安全检查 深圳平台网站建设 做网站北京 网络安全专家 网站信息安全等级测评保护 网络安全零基础书籍推荐 cog信息安全专业委员会 哈尔滨网络宣传与网站建设 如何创建个人网站 石家庄网站制作公司 营销社会环境分析 互联网营销工作简历 移动营销的劣势 网络安全事件简述 网络安全工作西安 人网站建站 病毒营销的方案 厦门网站建设 深圳平台网站建设 上海信息安全中心地址 信息安全事件通报流程 cog信息安全专业委员会 请下载《网站备案信息真实性核验单》打印并按样例提示填写 网络安全工作西安 中国网络安全监测中心 长沙网站制作电话 网络营销目标包括哪些 南通哪里有做网站的 网络营销制作指导思想 侵犯信息安全罪 国家网络信息安全网站 国内全屏网站有哪些 长沙网站制作电话 定西网站建设 app互动营销策划 营销职能 国家信息安全管理办法 传统营销模式的优点 信息安全等级分类 昆山网站 怎样学营销 信息安全技术云操作系统安全检验要求 昆明企业网站建设公司 soc网络安全管理平台 深圳能士信息安全有限公司 中国信息安全法律大会,-1 重庆商城网站制作报价用公共网络安全吗 互联网营销环境变化 重庆网站推广 怎么设置网站栏目 定西网站建设 默网络营销 网络营销的作用意义 信息安全等级保护标准体系遵循以下原则:() 微博营销成功案例 中国网络安全监测中心 快餐4p营销组合策略 网络营销出来有用没 e营销网 信息安全教育机构 电商营销可以自学吗 网络安全通报实行 网络安全事件简述 信息安全 软件安全实验报告 网络营销出来有用没 温州网站优化 长沙营销型网站设计 网络营销目标包括哪些 南京信息安全公司排名 深圳能士信息安全有限公司 人网站建站 网络安全对社会的影响 网站设计的优点和缺点 南京网站制作信息安全就业好吗 传统营销经典案例 信息安全中常见的攻击,-1 互联网营销工作简历 网络安全法 研发安全 2014信息安全峰会 重庆网站建设 优化 电商营销课程培训课程 企业信息安全优化方案 网络安全 研究方法 信息安全检测能力 中国信息安全法律大会,-1 许可email营销的功能 广州网站制 快餐4p营销组合策略 kingcms php版 如何让生成的页面在网站根目录下 淄博网站建设 网站前台 网络营销前景好么 企业网络安全评估 中国信息安全测评中心属于 陕西营销型网站建设公司 重庆营销推广公司电话 2014信息安全峰会 重庆微博营销公司 营销神器 银川怎么做网站 银川怎么做网站 营销职能 互联网营销环境变化 陕西营销型网站建设公司 网站建设步骤 房地产网上营销 网络安全资讯 信息安全队,-1 山西信息安全管理中心 网站乱码 基于jsp/asp.net的中小型企业商务网站的设计和实现 网络营销运营专员 信息安全人才 网站推广服务 重庆微博营销公司 网络安全日郭启全致辞 温州优化网站 第三方营销平台的发展趋势 网络营销数据的来源 kingcms php版 如何让生成的页面在网站根目录下 保护网络安全的常用手段有 网络安全事件处理报告 职场信息安全 长沙网站制作电话 软件系统信息安全建设方案,-1 幼儿园网站设计 富锦网站 中国信息安全测评中心属于 饥饿营销双刃剑图片 中山网络营销 信息安全风险评估指标 网络安全的保护技术