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
长沙网站空间做网站的好公司网络安全体系构成要素中恢复上海做网站网络安全攻防专业方向汽车网络安全攻击视频昆明响应式网站制作哈尔滨的网站设计成都 企业网站建设公司开县网站建设新人一枚,请多多支持,不喜勿喷他,夜里可以灵魂离体,自由来往于阴阳两界,将死者的灵魂带到阴司报道,天亮之前灵魂回到身体内又变成了正常人。完成了八八六十四个勾魂任务,泄露天机的父亲会不会醒过来......忠国南方的炎炎夏日,准备执飞新西蓝航空公司从香岗飞往新西蓝奥克蓝的航班的三位机师分别有不同的遭遇,为后面的飞行留下了隐患。 当天晚上,新西蓝航空公司载有248名乘客和10名机组人员的NZ007航班从香岗起飞,在飞往新西蓝奥克蓝途中,三位机师先后分别因食物中毒、接触了化学品引致过敏反应和头部受到碰撞等情况而休克昏迷,飞机失控急速下坠,并向海面俯冲,客舱出现了许多惊险场面。 危难之际,忠国青年W与空姐C合力控制住了飞机,解除了第一次危机。后来,在地面空管人员和机师的协助指导下,第一次接触飞机驾驶的W和C 担任了临时机长,在空中遭遇了雷暴、漏油、起落架故障等一系列惊险遭遇后,W和C在远程指导下需要把飞机迫降到奥洲悉苨机场,整个过程惊心动魄…… 本书正在大改,作者会尽快修改完毕。 ———— 威信公众号:竹楼听细雨 欢迎大家加入现代佣兵周文意外魂穿到民国学生周文身上。他利用穿越带来的一颗佛珠的神奇功能,再加上后世带来的经验、知识和技能。打造了一只武功高强、军事技术顶尖的佣兵团队。 他带领这支佣兵团,历经中原大战、淞沪抗战、称雄上海滩。装备了当世最先进的各种武器,最后投身于伟大的抗日战争中。带着兄弟们杀鬼子......这是一年一度的节日。 人们总是都在这一天相聚在一起,一齐放那花灯,游船。 每个人会在岸上买下一盏属于自己的白灯,上船之后,把它挂在船上。 年年如此,怎知?今年这日,却稍不平静。 岛上的红光,还有那棵树,那又是谁思念的人啊?“十万块你还想结婚?根本就是想屁吃!”   “那些追我闺女的随便一个就比你好一万倍!”   “拿不出万彩礼,休想过我这一关!”   和女友即将修成正果之际,却遇上恶毒丈母娘的刁难,开口八十八万彩礼,让方路当场就要发飙走人,却没想到在一通电话后,母亲被逼自杀了。   竟是要用自己的命去换彩礼让方路结婚…… 从教20余载对教育的点滴思考,近些年来随着我国综合国力的显著提升,国家对教育的投入越来越大,教育的硬件设施有了很大的改善。但科技的进步时代的发展,教育也面临很多的问题,教育中的有些问题不是用钱可以解决的。我就我工作中遇到的教育问题以及社会中关于教育的热点问题,站在一个教师的角度发表个人的一点粗浅的看法。  当他以少年身份重回地球,   唯有一人一剑。   会如何抉择?   千年,万年的光阴过去。   少年,还是少年吗?  自上古以来,能长生久视者寥寥无几。如今星河异动,或许正是成仙的大好时机。少年星轲,怀懵懂入世,经生离死别、历万丈红尘,最终能否不醉星河?前路凶险万分,稍有不慎,便可能黄土不成。等待他的,是“云梦虚”、“生死妄”、“阎罗判”以及……
长沙网站空间 网络安全好学吗 学校网站开发 鹤壁网站建设 办公室信息安全工作职责,-1 网络安全动画片 网络营销对传统营销模式的影响 信息安全认证书 营销外包效果 营销引流软件 与女友前世的前世修行【www.richdady.cn】 冤亲债主干扰咨询【www.richdady.cn】 失业的前世因果【www.richdady.cn】 孩子厌学的环境影响【www.richdady.cn】 心慌胸闷头晕的原因分析咨询【www.richdady.cn】 孩子不爱读书的阅读环境如何营造?【σσЗ8З55О88О√转ihbwel 自闭症的心理调适咨询【www.richdady.cn】√转ihbwel 精神不振的咨询技巧咨询【微:qq383550880 】√转ihbwel 干扰的自我感知方法【微:qq383550880 】√转ihbwel 化解【微:qq383550880 】√转ihbwel 为什么过世【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子压力大的自我提升【企鹅383550880】√转ihbwel 大龄剩女的婚恋心态如何调整?【微:qq383550880 】√转ihbwel 灵魂化解的仪式【企鹅383550880】√转ihbwel 存不住钱的心理调适咨询【企鹅383550880】√转ihbwel 孩子学习不好的案例分享咨询【σσЗ8З55О88О√转ihbwel 亲子关系的案例分享【σσЗ8З55О88О√转ihbwel 去世的父亲的前世修行咨询【www.richdady.cn】√转ihbwel 事业不顺的职场建议咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何发现前世缘份咨询【微:qq383550880 】√转ihbwel 网站费用 灵魂网络安全 网络安全中的物理威胁包括什么四川省网络安全报警 怎么建好网站 公司网站手机版设计 网站内连接 网站建设 php 学校网站开发 手机wap网站制作 实战全网营销是干什么 网站默认图 潍坊做网站建设的公司 医疗网络安全解决方案 信息安全等保三级 查询网络安全产业基金武汉 鹤壁网站建设 中国网络安全年会2017 西电2015 信息安全就业 广州网络微信营销公司 网络安全资质证书有哪些 长沙网站空间 网络营销对传统营销模式的影响 网络营销基本内容 网络安全审计 课件 网络安全说明 信息安全等级保护 措施 优势网网站 360网络安全大学 网站内连接 衡水移动端网站建设 营销型高端网站建设 网络安全审计 课件 灵魂网络安全 哈尔滨的网站设计 企业网站建设目的 国家信息网络安全机构 网络安全动画片 怎么建好网站 有哪些网络安全团队招人? 上海网网站建设 互联网网站开发 网络营销网站规划建设 网站建设 php 一个网站做几个关键词手机营销有哪些方式 营销策划或推广 饿了么网络营销策划书 化妆品网络营销 企业信息安全介绍 网络营销整体运营方案 信息安全和网络安全qq飞车网络安全存在风险 信息安全技术 网络安全等级保护基本要求 网络安全企业高峰论坛 网络安全资质证书有哪些 网站内连接 工业智能网络安全 网站建设新闻 昆山高端网站建设 深圳最好网络营销课程 网络安全说明 网络安全网络信息安全 网络安全五大特点 网站建设 php 设计网站可能遇到的问题 网站费用 中企动力官网网站 丹江口网站建设 学最新网络营销多少钱 北大青岛网络营销 衡水移动端网站建设 企业信息安全介绍 丹江口网站建设 网络安全动画片 业务对信息安全 运维网络安全审计系统 网络安全动画片 网站运营 信息安全等级保护 措施 网站建设新闻 360网络安全大学 域名与网站建设 集团网站建 网络营销对传统营销模式的影响 营销策划或推广 网络信息安全教材,-1 营销引流软件 idc信息安全管理系统架构 cu eu 实战全网营销是干什么 网络安全攻防专业方向 小米内容营销分析 国家安全网络安全 网络安全资质证书有哪些 网站信息安全通报制度 酒店电子邮件营销案例 做网站的好公司 西电2015 信息安全就业 网络安全攻防入门 医疗网络安全解决方案 网络营销网站规划建设 信息安全和网络安全qq飞车网络安全存在风险 一个网站做几个关键词手机营销有哪些方式 网络安全好学吗 合肥网络营销外包公司 微网站搭建平台 成都品牌整合营销 落地页网站 清华信息安全 做网站实验体会 网络安全审计 课件 网络营销发展课 360网络安全大学 十大网络信息安全事件 鹤壁网站建设 北京启明星信息安全技术有限公司 动画网站模板 2017年信息安全泄漏事件 佛山本地的网站设计公司 网站配色表 网站的特点信息安全等级怎么划分,-1 深圳最好网络营销课程 idc信息安全管理系统架构 cu eu 2017年信息安全泄漏事件 营销引流软件 网络安全开发工程师 网站建设周期 网站默认图 成都品牌整合营销 一个网站做几个关键词手机营销有哪些方式 手机行业的网络营销 企业网站建设目的 信息安全竞赛试题 酒店电子邮件营销案例 网络安全周活动 深圳网络营销 鹤壁网站建设 运维网络安全审计系统 网络安全好学吗