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
常州网站制作公司怎么测试网络安全性中国计算机网络安全网网站建设制作 南京公司戴尔网络营销的关键外贸营销网站建设专线网络安全怎么建个自己的网站长安建网站公司营销e-mail信息安全等级保护的原则是,-1一个即将灭亡的文明,一扇古老而神秘的门,开启一段文明举族搬迁的异世界之旅。你可曾亲身体会过绝望…… 在那毫无生机,布满黑暗的地方,她生活了一年。 她为了活下去,放弃了与生俱来的,甚至,抛弃了灵魂。 可她,依旧成为别人的玩偶,成为别人棋盘上的一颗棋子。 那是一个专门为她设计的阴谋。 你真的了解过你身边的每一个人吗? 待她温柔之人,不过是蓄意的接近。 待她友好之人,不过是借她之手,拨开云雾。 她真的会有光吗? 她靠着每日每夜的训练,登上了巅峰。 可她,又为了一个真相,放弃了力量。 这场织网不过是别人的游戏, 她的存在不过是个笑话, 可,她偏要打破这场死局。 自签落下的那一刻起,一切已悄然注定。 新秩序的建立者,让一切新生吧!这是一个关于两位少女的故事。被神明眷恋的爱丽丝——西门子拥有被称为&amp;lt;凋叶咒&amp;gt;的诅咒,在得知自己害死了另一位少女的家族后,她决定踏上梦境世界的旅途,以自己的方式拯救那位少女。 世人虽渺小,可是每个人都想挣脱束缚。 诸神虽伟大,可是神也总有陨落的一天。 仙侠恩怨,王朝争霸,爱恨情仇。 且看他们演绎一场不朽传奇。 李贤穿越了,来到一个叫大秦皇朝的世界。 别人穿越要么成为皇帝,要么成为富家子,可我却成了个太监! 还好拥有金手指,能够让我变回真正的男人。 本想就这样苟在皇宫内逍遥快活,可世事难料,皇位更迭灾祸蔓延到了整个大秦。 奸臣当道、外敌入侵。 眼看着自己的快乐生活被打破,李贤只好站出来。 诛邪、斩妖、扫黑、除恶... 誓死守护大秦,保护后宫三千佳丽。楔子 我叫千羽,二十四岁,打工人,每天做着相同的工作,我却很满足,因为家里人多不用安排家庭的事情,无牵无挂属实是躺平了。 因为一场意外,我来到了海贼王的世界,不过我对于力量并不渴望,我只想好好过好每一天,珍惜还活着的时间。一片以灵髓为尊的异世大陆,一个不被世人看好的空灵髓少年,他要向世人证明,我命由我不由天…… 一路喋血,万般杀戮,清风与明月相伴,横断万古,一代强者从此复苏! “我要弑天,我要灭地,我要屠尽九幽,我要诛尽须弥……” 仙灵降世,灵气复苏。 妖尊悟空惨被菩提老祖疯狂追杀,重创之际,利用仅剩神力,封锁火星之石隧道,化作一粒记忆碎片陨落…… 百年之后,飞落水球,成为了水球人类的大脑思维结晶,之前历史记录,书籍神话人物,都是该神的记忆,最后徒弟秦记展开了亿年的复仇计划……顾清是一个大二即将毕业的学生,这个时候学校居然提前让学生们出来实习。刚刚出到社会工作的顾清又会遇到怎样的故事呢?他又会在什么时候脱单呢,不用每年都是双11和光棍节一起过吧!在梦里,我梦到了一片海,在海边有一百个人静静地看海。他们说愿意把每个人的故事讲给我,让我写出来。我很羞愧,至今我的作品仍无人问津。他们说相信我,总有一天会闪闪发光。 带着他们的信任我把他们的故事转述出来,这次看似我是作家,其实写作的是他们自己。
北京高端网站设计外包公司 访问京东为网站选择5个核心关键词和30个长尾关键词? 深圳网站维护 第四届网络安全竞赛 法国网络安全信息安全测试资质证书 罗湖网站建设 信科网络 网络安全成就 病毒防范与网络安全 上海外贸网站建设 中国计算机网络安全网网站建设制作 南京公司 前世缘份的故事有哪些真实经历?【www.richdady.cn】 长尾词【www.richdady.cn】 精神不振的案例分享咨询【www.richdady.cn】 官司的预防措施【www.richdady.cn】 迟缓儿的自我提升咨询【www.richdady.cn】 前世老公的前世记忆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 莫名其妙感伤的心理调适咨询【σσЗ8З55О88О√转ihbwel 如何预防过早离世威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 为什么过世的前世案例威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 缺心眼的前世记忆咨询【企鹅383550880】√转ihbwel 感情纠纷的前世记忆【微:qq383550880 】√转ihbwel 亲子关系中的沟通艺术咨询【微:qq383550880 】√转ihbwel 阴间生活的前世解析咨询【企鹅383550880】√转ihbwel 与女友前世的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与女友前世的因果关系咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 交通意外的常见原因咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 性压抑的咨询技巧【企鹅383550880】√转ihbwel 有官司的解决方法【企鹅383550880】√转ihbwel 头脑混沌的自我提升咨询【微:qq383550880 】√转ihbwel 门户网站模板 绵阳公司商务网站制作 网络安全管理技能大赛 第四届网络安全竞赛 深圳公司网站改版通知 下一代网络安全 网站上传文件存储方式 网站设计总结 防cc 信息安全 北邮网络安全 北京高端网站设计外包公司 画图标网站 长春专业网络营销公司 微博网络营销软文 东方营销学 北京事件营销公司 莞城网站制作 零食网络营销策略 微信公众号营销文章 戴尔网络营销的关键 门户网站网站制作 工控企业信息安全 营销推广要点 网站整合营销 东方营销学 营销的图片 网络安全审计设备连接方法 营销动态 绵阳公司商务网站制作 网站开发功能需求文档 营销贸易 深圳公司网站改版通知 营销餐饮客户方案案例 福州网站制作公司名字 深圳外贸网站建设 平台营销推广方案 国家注册信息安全员 人口健康网络与信息安全风险评估 信息安全风险评估 案例 个性化网站 网站引流. 第四届网络安全竞赛 网络营销成功的案列 国家注册信息安全员 工业控制系统信息安全评估规范 信息安全技术信息系... 北邮网络安全 国家网络安全体系 访问京东为网站选择5个核心关键词和30个长尾关键词? 衡水网站排名优化公司 信息安全公告 网络安全大学生信息安全行业的企业 门户网站网站制作 企业网络营销战略 网站制作及排名优化 网络安全成就 湛江网站开发 微信公众号营销文章 信息安全服务资质认证公司 国内渠道整合营销 网络营销八大基本职能 工业控制系统信息安全评估规范 信息安全方面主要工作 工控企业信息安全 衡水网站排名优化公司 网络安全教育培训资料 平台营销推广方案 总裁营销学 2017信息安全大赛 延安网站建设 电子商务网站制作 下一代网络安全 长春专业网络营销公司 营销餐饮客户方案案例 可口可乐网络营销策划 2017信息安全大赛 网络安全保卫局官网 网络安全是指 营销e-mail 信息安全的实现有哪些主要技术措施,-1 深圳网站维护 信息安全监测服务 it信息安全做什么 网站背景怎么弄 北京高端网站设计外包公司 营销型网站设计特点 电子邮箱营销 上海外贸网站建设 网络安全项目测评 信息安全规划 外贸整合营销方案 北京高端网站设计外包公司 网络营销传播含义 营销特点 采用邮件营销企业注册网站的免费网址是什么 采用邮件营销企业注册网站的免费网址是什么 中国计算机网络安全网网站建设制作 南京公司 工业信息安全产品 重庆公司建网站流程 网站 体系 济南网络营销推广 网络安全共同体 信息安全的成效 网络营销工具与方法 信息安全技术的定义 免费kingcms模板影视制作公司网站模板+原程序下载 山东网站建设推广 可口可乐网络营销策划 b2c电子商务网站 电子邮箱营销 重庆网站托管 商务网站开发 防cc 信息安全 东方营销学 网站背景怎么弄 网站建设网站推广 网站上传文件存储方式 营销动态 网络营销在我国的发展 昆明信息安全培训班,-1 做网站讯息 o2o电子商务网站 杭州建网站 淄博网站制作 珠海高端网站制作公司 网站开发功能需求文档 衡水网站排名优化公司 网络安全项目测评 网络营销工具与方法 怎么建个自己的网站 无锡市网站设计 无锡好的网站公司 免费企业网站创建 重庆微信网络营销推广 上海做网站 公司