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
信息安全管控营销学教练网站页面设计上饶网站建设印度 信息安全个人信息安全下载信息科技有限公司网站建设上海高端网站设计网站备案网站移动端网络安全程序文件方源穿越到异界,发现自己身处牢狱,即将命不久矣。 幸好有着伴随他穿越而来的玄幻模拟器,让方源能够将意识投入到模拟器世界中模拟人生,获得超凡力量。 武道世界、巫师世界、诡异世界、修仙世界... 在无数个画风迥异的模拟世界中,方源意识投射诸界,在诸世界中漫步、横行…… 不平凡的男人和不平凡的女人相遇在一起,会产生什么效应? 是悲惋动人凄美缠绵的恋爱故事吗? 不平凡的浪子和不平凡的狂人相遇在一起,又会谱写出什么? 是惊心动魄荡气迴肠的英雄故事吗?   乾坤宇宙,总有意想不到的东西存在。 世间万物,总有光明与黑暗的一面。 万人欢呼的胜利者,得到的是王者的荣耀!   穷途末路的落败人,得到的是最后的悲歌!   林田获得随身空间种田,春花秋月,悠然南山,坐吃山不空。 他只想过好自己的小日子,实力却不允许他低调。 什么是钱?什么是美女?呵。 当灵果风靡全世界,人人求之不得之时,灵果制造商躺在摇椅上悠然撸猫,岁月静好。 然而,当危机降临到他在乎的人身上,要战,便战! 天道亦无常,人心更反复,世间三千疾,最苦是抉择。一个被命运驱使的少年自深山中走出,就此入世…风起云涌,仙道争锋,天意无常,人心不古…历经千难万险,又该作何选择?愿只随本心,纵错也无怨! 修道无始终,何以为巅峰… 偏拗执念深,百炼不为仙… 天意虽相悖,吾只随吾心… 万劫纵不复,无怨亦无悔…重生在了天道即将崩溃,鸿钧三清远走寻到,天地王母受援以进,现代科技飞速发展,对于修行却是半开放的世界,江屹煊被选为了复苏天道的棋子。 对于这些,江屹煊有话说:“我只想把仙丹当糖豆,把八九玄功当炼体术,让亲人无病无灾。用真火来炒菜,用灵泉当家庭饮用水,让石材释放出它最美味的口感。对于复苏天道什么的,谁爱作谁作,我没兴趣!”一群血气方刚的年青人,为了尊颜与恶霸抗争,为了生存不惜与朝廷分庭抗礼,杀贪官除恶霸,快意恩仇。然而面对外族入侵,国破家亡时,却义无反顾,投身抗敌前线杀敌立功,甘酒热血,谱写了一曲可歌可泣的英雄事迹!那一天,渤海大学钻了空子。 让两名黑人球员作为留学生外援,给大学联赛带来了噩梦,杀死了每个体育生的梦。 那一天,楚风重生归来,完美控场,永远以高对手一分的姿态主宰赛场,逐渐成为球坛的恐惧。孟翔偶然得到一本书,书中三十六计颇为神妙。 功法缺失怎么办?孟翔翻了一下书,嗯……抛砖引玉,优化! 别人有乾坤袋、空间手镯呀!孟翔翻了一下书,无中生有,了解一下?! 咦?这妖兽看上去好厉害的样子,打得过吗?孟翔翻了一下书,隔岸观火,原来是个绣花枕头啊,弄死丫的! 孟翔翻着书,得意洋洋:我有计策我怕谁!由于来自灭世级强者:作者君的无上伟力,文科宅男燕藏锋穿越到了一个多国争霸的年代。 他只想成为成为一个逍遥的贵族子弟,然而他的老父亲燕王喜似乎总是对他图谋不轨。 第一次。 “逆子,想不想当燕王?”燕王喜笑眯眯的问。 “傻子才当燕王呢!”燕藏锋对此不屑一顾:“再说了,大哥还活得好好的呢!” “好!”燕王喜不再说话。 第二次。 “逆子,你大哥没了,你该上位了!”燕王喜说道。 “不去。”燕藏锋十分潇洒:“二哥会是一个好燕王的。” “你自己说的。”燕王喜还是没强求他。 第三次。 燕王喜躺在病榻上,说道:“逆子,你二哥也没了,你总该上位了吧。” 看着满面红光的燕王喜,燕藏锋满脸无奈。 “你要是不装病诱惑他,他能造反?” 这是一个希望儿子继承王位的老父亲,和一个只想当咸鱼的儿子相爱相杀的故事。你若忌惮老魔我,尽管下杀手,我虽转世法力皆空,但也不是你这货色能随意欺负。 美人炉鼎,我自取便是。 我本魔道,莫谈良心
今日头条营销策划面试 网络安全检查项目 温州微网站制作哪里有 大学网络安全 网络安全测评资质 做一个网站要多少钱 个人信息安全下载 今日头条营销策划面试 舆论营销 网络营销环境包括 意外事故的主要原因分析咨询【www.richdady.cn】 性压抑的心理调适咨询【www.richdady.cn】 前世今生的轮回真的存在吗?咨询【www.richdady.cn】 意外的原因咨询【www.richdady.cn】 无形干扰的原因分析咨询【www.richdady.cn】 孩子厌学的解决方法【www.richdady.cn】√转ihbwel 前世老婆的识别方法【微:qq383550880 】√转ihbwel 婴灵的安抚有哪些技巧?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 升迁障碍的职场瓶颈咨询【企鹅383550880】√转ihbwel 心慌胸闷头晕的解决方法咨询【微:qq383550880 】√转ihbwel 家庭关系咨询咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 老公家暴咨询【企鹅383550880】√转ihbwel 如何知道自己有前世缘份?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 莫名其妙感伤的案例分享咨询【σσЗ8З55О88О√转ihbwel 头脑混沌的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 事业不顺的解决方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的母亲的去向解析【www.richdady.cn】√转ihbwel 前世老公咨询【企鹅383550880】√转ihbwel 无形干扰咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 公司破产的心理调适【企鹅383550880】√转ihbwel 重庆专业做网站 营销型网站建设明细报 简述信息安全目标 免费的企业网站 网络安全周宣传 网络营销工具的概念 信息安全博士干嘛 利用网站营销的目标 网络营销公司的排行榜 网络安全 脚本攻击及其防范方法 网站要什么 骗子营销 凡客诚品网络营销评估 网络信息安全的技术特征. 哪里的佛山网站建设 软件营销吧 营销电脑培训 网络营销类职业 上海高端网站设计 企业手机网站建设流程 网络安全界的名人 2017北京网络安全周 网络营销传播 案例 问答营销的排名 卫龙 整合营销 信息安全与管理证书 网络安全作业平台 国家信息安全漏洞共享平台 cnvd 网络营销属于工科吗 免费网站申请 长春做网站 网络安全风险等级意义 huang色网站 集团网站建设哪家好 无线网络安全事件 沈阳营销策划 优帮云 提供常州网站建设 原厂商具备 信息安全服务资质 安全工程一级哪个服务器厂商有 重庆整合网络营销代理 小红书内容营销 网络安全法 网络空间注册网站的免费网址是什么 做一个网站要多少钱 网络营销理论分析报告 个人信息安全下载 网络安全运维服务 营销代理 网络安全防护软件2017信息安全认证 sem营销运营优化公司 邵阳网站建设 如何改变网站首页栏目 自已建网站 昆明营销团队 网络安全管理领导小组办公室 网络营销的推销 邵阳网站优化 渠道策略的网络营销 网络安全周宣传 信息安全管控 专业的外贸网站建设 网络营销工具的概念 银川全网营销 主动营销意义 软件营销吧 珠海品牌网站设计 珠海品牌网站设计 企业网络安全介绍 赵伟网络安全 专业的外贸网站建设 东软集团网络安全产品 网站网页制作公司网站 江苏君立华域信息安全技术有限公司 北京专业做网站 国家信息安全漏洞共享平台 cnvd 公安局网络安全管理 法律网络安全 网络营销公司的排行榜 上饶网站建设 网站备案网站移动端 渠道策略的网络营销 免费网站申请 网络安全界的名人 魔力象限 网络安全 营销短视 网络安全检查项目 网络安全程序文件 重庆整合网络营销代理 网络营销类职业 制学网网站 网络信息安全的技术特征. 信息安全项目申请书 简述信息安全目标 win10 360网络安全防护 互联网 与传统营销区别 网站页面设计 海珠区pc端网站建设 waf 信息安全 信息安全管控 信息安全与管理证书 利用网站营销的目标 网络安全法 网络空间注册网站的免费网址是什么 网络安全 活跃 论坛 企业手机网站建设流程 同 营销 西安网站公司 外链营销的发展趋势 营销策略案例 大学网络安全 福州专业做网站的公司有哪些 企业手机网站建设流程 免费的企业网站 制学网网站 江苏君立华域信息安全技术有限公司 如何改变网站首页栏目 信息安全实验项目,-1 近几年饥饿营销的案例分析 哪里的佛山网站建设 网络安全周宣传 网络安全 开源 网络安全作业平台 win10 360网络安全防护 网络营销理论分析报告 信息安全测评eal3 请举几个web2.0风格的网站例子(中/英文)分别说明其网站构架 ciip 信息安全 网络安全测评资质 邵阳网站优化 昆明网络营销实战培训 网络安全法 网络空间注册网站的免费网址是什么 自已建网站 沈阳营销策划 优帮云 昆明营销团队 西安网站公司 cisp注册信息安全专业人员 网络安全结论 系统上线信息安全培训,-1