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
汕头建设网站北京公司网站建设报价自己建立网站营销策划的含义网站设计费鹤壁做网站人们常说的网络安全一般包括太原全网营销服务商电商营销策略案例营销策划培训班浩荡天地,四界交汇;万千生灵,人才荟萃。 她,是他人生中最珍贵的至宝,是神给予他冰冷的一生中唯一的救赎。 他,是她人生中最英勇的骑士,是照亮她孤寂而迷茫人生的璀璨曙光。 少年自卑微之地涅槃重生,与少女相遇;相互依靠,再度闯向那精彩绝伦的纷纭世界,重新开启属于自己的全新传奇。 手握究极之力,脚踏日月星辰;持掌万道乾坤,世间以我为尊。冥冥之中自有天意,穿越者何必天下无敌。人心正,自有天助。召唤师,万兽朝宗…… 战士等级:初级、中级、高级、青铜、黄铜、黑铁、白银、黄金、圣战士 法师等级:学徒、一级——六级、七级大魔法师、八级魔导师、九级圣魔导师 召唤兽法师:无等级区分 魔主?我的乖乖,想不到本公子竟然会是最大的反派 宋江:那是我的梁山? 萧禾:梁山?星主的?谁说的,靠边靠边,我先来的 宋江:可是,九天玄女给我说的 宋徽宗:吾的九鼎何在 道长:在梁山在小时候,父母因为一场车祸意外去世,性格内向的陈阳在读完书后当起了一位网文作者。 相亲失败的那天,陈阳情绪失落地回家,却发现自己小说中的女主竟然跑出来了! 九荒世界百族林立,上古时期人族、海族、修罗族、魔族、妖族、鬼族等强大种族为争夺天地第一神器无量芥子天庭爆发大战,使得各族元气大伤,百族不得不归隐。拥有混沌圣体的帝天羽无意间得到天庭,从此开始了他的征伐九荒、战百族之途。平八荒、征魔族,立天庭、建地狱、控六道轮回 ,封神碑分封诸神,成为万族共尊的天帝。 天庭势力组成:九阁十八殿三十六宫七十二部。 天罚阁,直隶于帝天羽。 天策阁,智囊谋士。 药阁,掌管天庭神药天,主要职责炼丹、炼药、治伤、培育神药神草。 器阁,掌管天庭神器天,主要负责炼器、开矿。 武阁,天庭主要武力部门,分为金木水火土等部。 天机阁,情报机构,分为天罗地网两大机构。 天杀阁:刺杀机构。 天政阁,负责天庭内政。 天兵阁,掌管天庭军队。修为散尽后重生于凡俗世界,然幸运的出生却没有幸运的人生,新婚妻子婚前被侮辱而自杀,自己中毒差点再次死亡,而这一切的一切不过是因他多年前救的一个女孩,记忆重临让他再次踏入修炼,誓以残废之躯再入天道之上。穿越几年一事无成,刚当上掌门,宗门就解散,开局一人一狗,怎么建设最强宗门?历史上大人物的私密小事。部分根据史书分析得出,部分根据民间传说得出。真实性有待考证。绝对会刷新你的历史人物认知感。 本书的趣味历史分享qq群号:748083518你相信人会有两个灵魂吗?我相信,因为我的身体里,便有着两个灵魂。 前世你为我偿命,今世我为你的命!主角王斌生活在一个以元素为尊,以科技为辅的世界,但这个世界并非如同表面一样美好,各国之间的战争,魔兽的入侵
电商营销策略案例 怎么做好一个网站 12. 简述计算机网络安全内容和系统安全等级 为什么手机显示网络安全证书过期 网站制作换下面友情连接 中国人为网络安全事件 全国网络信息安全大会 2014 网络营销的竞争分析报告 信息安全检测定义 衡水企业网站设计报价 老公家暴的环境影响【www.richdady.cn】 前世缘份咨询【www.richdady.cn】 升迁障碍的职场晋升技巧有哪些?咨询【www.richdady.cn】 与老公前世的前世解析【www.richdady.cn】 孩子厌学的家庭教育【www.richdady.cn】 投资项目的环境影响咨询【σσЗ8З55О88О√转ihbwel 存不住钱的理财建议【σσЗ8З55О88О√转ihbwel 冤亲债主干扰的心理影响咨询【企鹅383550880】√转ihbwel 家庭关系的问题分析咨询【σσЗ8З55О88О√转ihbwel 暗恋的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的情感释放咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 精神不振的环境影响【微:qq383550880 】√转ihbwel 不爱读书的案例分享咨询【企鹅383550880】√转ihbwel 感情纠纷的解决方法【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 冤亲债主的干扰与化解技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 强迫症的家庭支持咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子厌学的辅导方法咨询【企鹅383550880】√转ihbwel 家庭关系的前世记忆咨询【企鹅383550880】√转ihbwel 孩子不爱读书的应对策略有哪些?咨询【www.richdady.cn】√转ihbwel 孩子厌学的辅导方法咨询【www.richdady.cn】√转ihbwel 信息安全运维实用技术 网络安全的发展历史 计算机信息安全产品 病毒营销的特点是什么 信息技术与信息安全 域名分为 上海营销app产品公司 营销组合的4p 网络营销机会分析报告 北京建设网站的公司 门户网站设计网络安全手机 信息安全登记 今日网络安全事件 网络安全风险提示 新网络安全法2017翻墙 物联网网络安全 网络推广营销招聘 cc信息安全,-1 合肥网站制作 中国石油信息安全通报 天津网站建设揭秘 网络安全检测评估 信息安全 一级 潼南网站建设 信息安全保证人员认证(简称cisaw) 广州微信营销 制作网站的步骤 口碑营销公司 营销案办理 胶州做网站 网络安全协议理论与... 长沙网站设计开发 网络营销机会分析报告 网站制作 成功案例 好三网网站 合肥网站制作 网站降权 营销案办理 手表网站模板 营销的组成要素 怎么做好一个网站 微信营销的特点有哪些 两栏式网站 西安网络技术有限公司网站 什么是病毒营销方案 物联网网络安全 营销的组成要素 卫士通信息安全技术有限公司浙江乾冠信息安全 12. 简述计算机网络安全内容和系统安全等级 病毒营销的特点是什么 英多微营销 怎么样 成都网站开发公司 网络安全厂家销售 网络营销的危害性 提高网站排名 网络营销的竞争分析报告 鹤壁做网站 cc信息安全,-1 友情网站制作 今日网络安全事件 好三网网站 制作网站的步骤 关于网络安全的通知 什么是微信社群营销 营销组合的4p 海淀手机网站设计公司 网站制作 成功案例 8469网站 信息安全+应急响应 手表网站模板 机械行业营销型网站 sem营销策划方案 国际网络安全顾问 品牌网站开发 营销策划的含义 网络安全的发展历史 汽车网络营销标题 网站设计公司 好三网网站 蒙牛网络营销 中国石油信息安全通报 网站建设联系电话 网站建设联系电话 网络营销策略论文 北京搜索引擎营销外包 汽车网络营销标题 网络安全培训资质 自己建立网站 网络安全检测评估 湖南网站制作电话 2016国内网络安全事件 信息安全管理员定义 网站建设访问人群 天津网站建设揭秘 网站内容要突出什么原因 长沙网站设计开发 品牌网站开发 人们常说的网络安全一般包括 汕头建设网站 网络游戏中营销植入 网络营销机会分析报告 8469网站 计算机信息安全产品 网络安全风险提示 2017年信息安全报告 四川大学网络安全研究院国家网络安全主管部门 怎样建立自己的网站 上海全网营销 网络安全互助平台邀请码 全国网络信息安全大会 2014 成都网站建设龙兵科技 微网站功能 怎样自己创造网站 中国人为网络安全事件 中国人为网络安全事件 网络营销机会分析报告 制作网站的步骤 网络安全互助平台邀请码 电商营销策略案例 网络安全协议理论与... 什么是微信社群营销 信息安全行业中权威资格认证有 怎么做好一个网站 cc信息安全,-1 信息安全是对信息的 近年来信息安全大事件 计算软考网络安全 网络安全厂家销售 四川大学网络安全研究院国家网络安全主管部门 网络安全产品和技术 手机信息安全概述 海淀手机网站设计公司 西安网络技术有限公司网站 信息安全检测定义 中国国家信息安全网 网络安全检测评估