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
做网站工具东城网站设计信息安全等级保护指引信息安全分析报告五级网络安全状况小米网络营销应用分析山东专业企业网站建设国家信息安全主席建个简单网站自助建网站意外穿越大秦,成为八公子嬴子夜,觉醒神级阅读系统,只要读书就变强!只要读书就能获得无限奖励,只要读书便可入圣! 为此,嬴子夜终日闭关读书,兢兢业业,不招灾,不惹祸。 终有一日! 始皇重危,意欲东巡求长生。 墨家蠢蠢欲动。 六国余孽准备造反。 赵高意欲篡改遗诏。 …… 嬴子夜知道,这时候不能继续藏了!再藏大秦不复、自己也将被胡亥杀死! “扮猪吃虎十余年,今日本公子不藏了!” “今日,本公子以读书入圣!一剑斩天!” “传令,三千大雪龙骑军出动!” “传令,铁浮屠出动!” “……” 大梦一场,穿越到1987年; 一次车祸,梦魇中喝了忘忧水; 一只修罗手套,重生到五百年前; 古墓中激活了古龙珠,唤醒七色混沌葫芦,开启系统传奇之路; 十五万铁甲齐上阵,竟无一是男儿身; 心念起,万水千山~ 心念灭,沧海桑田~ 一念~可成众生~ 一念~可成天神~ 红尘砺剑心,沧海一笑间, 乾坤一剑平,万古啸青天, 笑傲宇宙巅,星空化自在~~一点蓝光,开启了新的人生。 阴险诡诈,谁能辩我正邪? 终生坎坷,临了身旁何人?穿越到架空夏朝的社畜李斯年背负着为狗皇帝王朝续命五年的重任,但外有敌国虎视眈眈,内有外戚祸乱朝纲,他该何去何从,如何在昏君的名号之下,完成自己的使命呢?一个二十一世纪的屌丝,刚完成一单新闻,猝死出租屋,还不知道有没有人收尸就来到了楚国,一个有着宋的憋屈明的铁血的平行空间还是异世界?总之不小心成了异性王唯一的子嗣,可能出场姿势不好,被人用锤子打出了的。周边都是贼兵蛮子鞑子,好在有后世的天线一条,不至于被古人玩死成为最惨穿越者,一路泡妞打蛮子,没事就种种地!当然是真的种地。重生在了天道即将崩溃,鸿钧三清远走寻到,天地王母受援以进,现代科技飞速发展,对于修行却是半开放的世界,江屹煊被选为了复苏天道的棋子。 对于这些,江屹煊有话说:“我只想把仙丹当糖豆,把八九玄功当炼体术,让亲人无病无灾。用真火来炒菜,用灵泉当家庭饮用水,让石材释放出它最美味的口感。对于复苏天道什么的,谁爱作谁作,我没兴趣!”李萧从小体弱多病,一场重疾最终无力回天。 “我要死了吗,我好不甘心。” 睁开眼,“咦,我没死呀,不过,这是哪里,我难道,穿越了吗?”陈煜在旅游途中被球状闪电击中意外死亡,因为某种特别的原因陈煜的意识和虚幻世界的世界种子融合,开辟了一个处于虚幻和现实之间的世界。在一片花飞过澜沧江的时候,叶沧澜跳进冰冷的澜沧江。再次醒来,是1997年的那个夏天,青梅竹马,邻家姐姐,冷傲校花,火辣教师……致逝去的青春!黑暗宇宙系列的神明大百科,本作将会详细的向各位介绍宇宙中的各位神明,包括龙神、幻海、圣魔以及已经登场的神明,方便大家更好的了解我的这个世界。本作属于小说衍生百科,作品分类随便选的。
毕节网站建设 大连网络营销策划公司电话 淘宝护肤品的营销策略 山东专业企业网站建设 如何做论坛营销 南昌网站定制 网络营销学科论文 大馆陶网站 信息安全分析报告 信息安全工程专业兴趣研究报告 大龄剩女的婚恋困惑如何解决?咨询【www.richdady.cn】 阴间生活的前世修行咨询【www.richdady.cn】 升迁障碍的职场突破【www.richdady.cn】 与公婆前世的记忆解析咨询【www.richdady.cn】 财运不佳的财富转运咨询【www.richdady.cn】 如何避免无形干扰因素咨询【微:qq383550880 】√转ihbwel 情感心理咨询在线咨询【微:qq383550880 】√转ihbwel 外灵干扰对日常生活的影响【www.richdady.cn】√转ihbwel 解梦的心理学意义【企鹅383550880】√转ihbwel 有官司的调解技巧【微:qq383550880 】√转ihbwel 精神不振的生活习惯【www.richdady.cn】√转ihbwel 前世缘份的前世因果咨询【企鹅383550880】√转ihbwel 财运不佳的财富积累方法有哪些?【σσЗ8З55О88О√转ihbwel 前世今生的轮回转世【www.richdady.cn】√转ihbwel 为什么过世的心理调适【企鹅383550880】√转ihbwel 人际关系不好的环境影响【微:qq383550880 】√转ihbwel 与老公前世的记忆解析【σσЗ8З55О88О√转ihbwel 缺心眼的解决方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 老公家暴的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的前世因果【微:qq383550880 】√转ihbwel 北京网络安全展 营销发展趋势 互合营销 视频网站设计 重庆知名网络营销公司 监控网络安全方案 网站靠什么 2016年信息安全形势 信息安全等级保护指引 深圳网站建设外包公司 网络营销信息流 网络安全法逐条解读 东莞网站建设公司 信息安全测评机构的资质认定 网站单选框的实现 网站开发 价格 北京网络安全展 营销发展趋势 互合营销 视频网站设计 重庆知名网络营销公司 监控网络安全方案 网站靠什么 2016年信息安全形势 信息安全等级保护指引 深圳网站建设外包公司 网络营销信息流 网络安全法逐条解读 东莞网站建设公司 信息安全测评机构的资质认定 it系统开发新技术展示探讨系列课程it信息安全课程 腾讯营销活动案例 国家信息安全主席 网络安全基金会 大馆陶网站 信息安全工程专业兴趣研究报告 什么是网络营销员 网站单选框的实现 网站靠什么 网络安全报警电话 中国电信网络信息安全 信息网络安全接入技术规范 信息安全的组织机构 本地佛山顺德网站设计 免费网站模板 信息安全测评机构的资质认定 信息安全服务安全工程类一级资质 淘宝护肤品的营销策略 信息安全管理制度体系,-1 微信网站开发 东莞市策划营销顾问 E校园营销推广方案 小米网络营销应用分析 北京网络安全展 国家信息安全管理办法 网站模板设计 合肥网络营销 沈阳公司网站建设 网络安全审计系统作用 电子商务网站建设的概要设计 网络安全法 通讯录 网站重建 国际网络安全期刊 微信营销成功的关键 如何加强移动网络安全 网站靠什么 伊春网站建设 农产品网络营销与实施 深圳网站制作公司资讯 判断开放网络安全 农产品网络营销与实施 什么是网络营销员 网络信息安全证书 E校园营销推广方案 第十届全国信息安全 好模板网站 android 网络安全 做网站工具 信息安全服务安全工程类一级资质 高逼格网站城市分站网站设计 网站建设免费 西安做网站的公司 网站颜色表 淘宝护肤品的营销策略 山东专业企业网站建设 网络安全 研究方法 营销策划基础知识 车辆网络安全 信息安全测试方案,-1 近期网络安全论坛 信息安全等级保护指引 网站核验点 信息安全运维服务内容 四川省信息网络安全 手机网站开发制作 伊春网站建设 做网站工具 网络营销信息流 四川省信息网络安全 网络营销方向学什么不同 东莞网站建设公司 信息安全包括数据安全 网络营销方向学什么不同 sdn:"信息安全"定义网络————openflow安全分析 国家信息安全主席 2016年信息安全形势 风险管理与信息安全 如何加强移动网络安全 营销发展趋势 长安微网站建设 网络安全报警电话 做网站成本 网络安全 开发语言 重庆知名网络营销公司 长沙手机网站设计 营销邮件广告邮件优点 鸡西网站建设 网络信息安全证书 营销名人 树莓派做信息安全 信息本身具有()等特性使信息安全容易受到威胁和损害. 首页营销 信息安全的组织机构 自主免费建站网站 什么是工业网络安全 微信网站开发 国家信息安全测评信息安全服务资质 本地佛山顺德网站设计 长安微网站建设 新的营销新观念 云网站功能 腾讯营销活动案例 西安做网站的公司 中国科学技术大学信息安全测评中心 腾讯营销活动案例 五级网络安全状况 搜索引擎营销如何使用技巧 网络安全法逐条解读 网络安全与管理专业 信息安全等级保护方案院校,-1 网站建设的支付宝网络安全 南昌网站定制 珠海做网站 高端的平面设计网站 中国电信网络信息安全 深圳网站制作公司资讯 上海高端品牌网站建设 常用网络营销推广思路 怎样做网站 信息安全等级保护指引 人物营销 南通网站建设 互联网营销平台选择 国际网络安全期刊 网络安全 研究方法 网站建设及优化 赣icp 嵌入式与网络信息安全哪个好 兴化网站制作网络营销的理论体系 首页营销 网站建设公司营销推广 好模板网站 上海手机网站建设电话咨询 微信营销成功的关键 信息安全管理制度体系,-1 长春网站建设 呼叫中心信息安全规范 什么叫做网站维护 嵌入式与网络信息安全哪个好 移动营销有哪些特征 信息安全测评机构的资质认定 互合营销 营销公司 上海 信息安全区 车辆网络安全 如何成为顶级信息安全 手机网站开发制作 网络营销学科论文 网络安全控制技术 最新的网络安全产品 深圳网站建设外包公司 高校网络安全方案 搜索引擎营销如何使用技巧 电子商务网站功能页面 电信用户信息安全协议 东城网站设计 合肥网络营销 群体营销 2016信息安全联盟大会 国家信息安全管理办法 信息安全运维服务内容 网络安全三合一是什么意思 网络安全法 通讯录 北京网络安全展 建个简单网站 海南网站优化 南昌网站定制 网站主色调简介怎么说 推一把网络营销怎么样 昆明网站建设多少钱汉中网站建设 风险管理与信息安全 网站建设公司营销推广 网络安全信息安全,-1 上海营销 成都信息安全协会电话 信息安全的职业 信息安全风险评估指南 gb 信息网络安全接入技术规范 it系统开发新技术展示探讨系列课程it信息安全课程 中国信息安全测评中心笔试 电子商务网站建设的概要设计 大馆陶网站 兴化网站制作网络营销的理论体系 常州微网站 移动营销有哪些特征 做网站收费 信息安全工程专业兴趣研究报告 饥饿营销的促成 信息安全的职业 鸡西网站建设 网络营销计划 案例分析 sdn:"信息安全"定义网络————openflow安全分析 什么是工业网络安全 合肥网络营销 免费商城网站 信息安全等级保护方案院校,-1 昆明网站建设多少钱汉中网站建设 什么是工业网络安全 小语种网站 沈阳公司网站建设 高端的平面设计网站 小语种网站 重庆知名网络营销公司 大连网络营销策划公司电话 信息安全分析报告 西安做网站的公司 北京网络安全展 复旦信息安全 网络安全审计系统作用 营销公司 上海 网站设计公司电话 怎么取消网络安全密钥 长春网站建设 监控网络安全方案 网站重建 网站示例 网站建设公司营销推广 自助建网站 新的营销新观念 东莞市策划营销顾问 复旦信息安全 营销qq邮箱如何登录 国家网络安全局 五级网络安全状况 外企应对 信息安全 近期网络安全论坛 网络安全法 评估 4g网络安全性 网站单选框的实现 外企应对 信息安全 视频网站设计 电子商务网站建设的概要设计 免费网站模板 视频网站设计 互合营销 网站重建 学院信息安全工作 重庆知名网络营销公司 信息网络安全接入技术规范 腾讯营销活动案例 网站模板设计 信息安全观念 网站主色调简介怎么说 第十届全国信息安全 自主免费建站网站 信息安全 周报 四川省信息网络安全 信息安全观念 微信营销成功的关键 网络安全 开发语言 上海手机网站建设电话咨询 大馆陶网站 腾讯营销活动案例 广州微网站建设案例 信息安全包括数据安全 淮安网站制作 网络营销学科论文 东莞市策划营销顾问 信息安全测评机构的资质认定 信息安全等级保护指引 信息安全服务安全工程类一级资质 什么是网络营销员 长安微网站建设 首页营销 高逼格网站城市分站网站设计 4g网络安全性 东莞网站建设公司 四川省信息网络安全 常用网络营销推广思路 高端的平面设计网站 网络信息安全证书 网站靠什么 信息安全工程专业兴趣研究报告 营销邮件广告邮件优点 信息安全 周报 风险管理与信息安全 网站建设及优化 赣icp android 网络安全 微信网站开发 网络安全知识教育平台 免费商城网站 第十届全国信息安全 建个简单网站 监控网络安全方案 什么叫做网站维护 常州微网站 免费网站模板 电子商务网站功能页面 重庆知名网络营销公司 网站颜色表 网络安全信息安全,-1 营销qq邮箱如何登录 营销公司 上海 sdn:"信息安全"定义网络————openflow安全分析 网吧信息安全证明是什么,-1 网络安全三合一是什么意思 大馆陶网站 成都信息安全协会电话 电子商务网站建设的概要设计 外企应对 信息安全 电子商务网站功能页面 沈阳公司网站建设 大连网络营销策划公司电话 昆明网站建设多少钱汉中网站建设 新的营销新观念 优秀的学校网站欣赏 信息安全的职业 推一把网络营销怎么样 2016信息安全联盟大会 复旦信息安全 网络营销学科论文 信息网络安全接入技术规范 网络安全法 评估 网络营销学科论文 昆明网站建设多少钱汉中网站建设 网站开发 价格 南昌网站定制 网络安全报警电话 最先进的网络营销 做网站收费 互合营销