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
工业控制系统信息安全防护指南网络安全夏令营网络安全现状与问题2017全国信息安全大赛智能网联汽车信息安全国内ui网站有哪些企业网络营销应用分析衢州做网站河间做网站自适应网站好建们不明日,灵气聚散,孕一神明,混沌始开。 清上浊下,天地得以开分。 绝地天通,分九重天,地十八层。 不周断,妖兽四起,尸山血海,民不聊生。 祖龙化力,平妖兽之乱,助秩序重修,现龙门、起天山,灵气借而复苏。 灵气始然,百家争鸣,拳脚技法、刀剑步招、丹药法门,皆而传之。 每逢十八,三界分合,灵气完足纯厚。 上天山,入重天,可获机缘,经劫难,入九重天,可为上神。 飞禽走兽,跃龙门,亦得造化。 妖兽鬼魅、近夜而行、夺精魄血肉、以逆天而修,堕入地浊,为大妖,称阎罗。 修士十八为修,替天行道,赶早悟化。 平常人家,不入不扰,食烟火、练拳脚,安之乐之。 周而复始,仙运再临,且看有缘者,乱世沉浮,得造化,显神通。 从学生到农民再到医生,阅尽世间酸甜悲苦。 不是医学世家,没有高学历。治病救人,战瘟疫救苍生凭的是永不言败的坚定信念,誓愿普救含灵之苦的悯世之心。 一部伤寒论,半部移身幻形分筋错骨术,演绎出一幕幕世间善恶人生,一曲曲俊男靓女爱情纠葛,一段段上下求索风雨人生路。杨涛是一个天才高中生,他能否顺利杀入NBA呢?混迹于政治场上长大的皇子,立誓要做一位明君。奈何寒来暑往物换星移,登上龙椅执掌天下时,才知皇帝的不易。酒池肉林夜夜笙歌,使其明君之路步履维艰,最终成为了要美人不要江山的快活皇帝。 因胴而生,为诺守诚,纵是天恨欢喜,地厌情深,假作时空锁原初,乱造混沌生浑浊,依然印纹灼赤体,破天重谱万世不灭缘。 一个寻找的故事…… 飞星的宇宙科研舰队,在一次量子跃迁跨空间跳跃中意外穿越暗域,来到了神秘的星球“蛮荒之境”,发现了超级能源——晶能。为了挖掘晶能,舰队首领默德拉利用绝对优势的高级文明科技,向原住民发起了殖民掠夺,意图统治蛮荒之境,遭到了祭师龙瑞恩领导的原住民顽强反抗。随着神秘深渊、梦魇、原初天兽鳆鸦马等反科学现象与物种的出现、以及他亲手设计制造的智能战斗女机器人予舍1026异常的进化表现,默德拉逐渐意识到,蛮荒之境的神秘与未知,远超他的想象,甚至蛮荒之境本身,或许也与飞星有着千丝万缕的时空关联,他不得不反思飞星对立阵营“破天计划”的可行性。 记忆,是个BUG,时间,根本就是假的…… 秦凡为救老婆,不得已暴露自身能看到宝物气息的能力,不断捡漏,只要是宝物,在秦凡的眼中都无所遁形,因此引起各方势力的注意,破真伪,看人心,鉴宝捡漏,玩转人生……妖乱末世,巨兽屠城,万妖夜行,人间如狱。 神秘少年,半妖之身,踏上猎妖风云路,书写一代妖相传奇! 且看他,猎妖、除魔、斗巨鳖、擒天龙、佐明君、征天下、运筹帷幄、纵横捭阖、荡除妖兽、平定末世!回到古代,成为一个小小的家丁,楚尘开始了自己的逆袭之路。 啥?被人当做童养夫,媳妇还不待见? 无妨,无妨,第一才女还在痴心等候呢,要不然考虑给一次机会? 啊?番国国师还要来登门辩经? 不怕,不怕,丢给一本《西游记》让他参悟,没准就能白日飞升了。 咦?燕国女帝又来密信要讨论人生哲理? 何必,何必,陛下要不我们还是躺下聊吧。 一剑转身三千里,一言可退百万师。 哥虽然不在江湖,但江湖上处处都有哥的传说。 我楚尘来了,就注定要名震天下!游轮失事,一觉醒来发现自己身处荒岛之上,身边相伴的却是朝思暮想的豪门千金…… 荒岛之上,和女神一起打造我的世界!二十年前,他被一代道门隐脉奇人所救。二十年后,他遵守师父遗命下山踏入何家,阴差阳错之下成为何家的女婿,内心从抗拒到默默守护,皆因那一纸婚约而起!
网络安全国家标准响应 信息安全 网站制作软件 2012年中国互联网网络安全态势报告 广道网络安全审计 无锡全网营销外包 单位信息安全等级保护工作部署 南京做网站口碑好的搜索引擎营销企业 下列哪项不全是防火墙的功能 防止内部信息的外泄强化网络安全性 营销员培训 网络安全技术杂志 事业不顺的职业规划如何制定?【www.richdady.cn】 存不住钱的心理调适【www.richdady.cn】 人际关系不好的咨询技巧咨询【www.richdady.cn】 特殊学校的前世因果【www.richdady.cn】 前世今生的因果关系咨询【www.richdady.cn】 特殊学校的案例分享咨询【σσЗ8З55О88О√转ihbwel 婴灵的前世记忆咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的改善方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 去世的母亲的前世记忆咨询【www.richdady.cn】√转ihbwel 官司的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 发育倒退的医学检查咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的情感生活如何改善?咨询【微:qq383550880 】√转ihbwel 耳鸣的解决方法咨询【微:qq383550880 】√转ihbwel 无形干扰的环境影响【微:qq383550880 】√转ihbwel 孩子学习不好的环境影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子学习不好的咨询技巧【www.richdady.cn】√转ihbwel 前世缘份如何影响情感生活?【σσЗ8З55О88О√转ihbwel 婴灵的超度与化解咨询【微:qq383550880 】√转ihbwel 家庭关系的沟通技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 网络安全现状与问题 网站建设金 国务院负责统筹协调网络安全工作和相关 淮北网站制作 目前的信息安全形势,-1 学校病毒营销方案 网络信息安全交流会 网络营销课程整体设计 云网站系统 网络安全实验班 中国移动网络安全竞赛 网络安全夏令营 深圳集团网站建设报价 商务网络营销 部门网站建设 临清网站建设 上海网站开发 2014 信息安全专项 西安高端网站制作公司哪家好 微网站建设资讯 社会大学生网络安全总体数据分析 网站盈利了 个性化建网站定制 东莞全网营销网络推广公司 郑州营销小公司 事件营销分类 工业控制系统信息安全防护指南 事件营销分类 信息网络安全技术培训 自建网站平台的页面功能 做生意的网站 东营做网站建设的公司 计算机网络信息安全证 计算机网络信息安全证 上海网站开发 网站加后台 设计 网站 网站建设com 网站备案填写的《信息安全管理协议》是去了备案的地方再填吗 宁夏网页设计网站 网络营销课程整体设计 绿色调网站 计算机流行的信息安全产品 信息安全不猛 计算机信息安全的基本要素 河间做网站 东营做网站 河北省网络安全公司 网络安全技术杂志 网络安全竟赛 做生意的网站 常州微网站建设 工业控制系统信息安全防护指南 网络安全技术杂志 个性化建网站定制 组合营销 网站制作 武汉 个性化建网站定制 部门网站建设 企业网站模板下载 中国移动网络安全竞赛 设计 网站 网络安全 银川 网络营销广告形式 国务院负责统筹协调网络安全工作和相关 山东大良网站建设深圳企业网站建设公司哪家好 温州手机网站推广 思科2017年年度网络安全报告 网络营销是啥 广道网络安全审计 网络安全国家标准响应 信息安全 网站建设陕icp 网站建立费用 中国网络安全局图标 微博营销运营方案 深圳集团网站建设报价 网络营销广告形式 多媒体营销 burp 网络安全题目 目前的信息安全形势,-1 网站设计公司长沙 计算机信息安全的基本要素 搜索引擎营销是 微网站建设资讯 网络营销推广案例分析 网站设计公司长沙 电商网站模板 宜兴网站建设 如何运用网络营销渠道 电商网站模板 知名信息安全公司排名 网络安全国家标准响应 信息安全 计算机网络信息安全证 部门网站建设 从以下新闻入手分析并阐述一下你对网络营销价格策略的看法 深圳企业网站建设公司哪家好 网站建设 福州 网络安全故事 东营做网站建设的公司 哪个大学信息安全 如何攻击网站 上海网站制作顾问 聚美优品营销模式分析 设计网站的软件 淮北网站制作 思科2017年年度网络安全报告 汕头网站公司 网站建设com 深圳企业网站建设公司哪家好 临清网站建设 中国网络与信息安全大会 网站营销公司哪家好 深圳大型网络营销公司排名 重庆微信营销的公司 医院信息安全等级保护方案 网络安全的主要类型 银川建网站 创新的南昌网站制作 南京在线网站制作 网站制作软件 网站建设公司运营 网络安全实验班 商务网络营销 在美团怎么做营销 网络微信营销公司简介 网站制作 武汉 网站推广报价 衢州做网站 计算机流行的信息安全产品 国家信息安全意义 信息安全员培训网络安全企业 深圳 深圳大型网络营销公司排名 企业网络安全测试 信息技术与信息安全 linux系统的优点完全免费代码开源 国内ui网站有哪些