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
上海网站建站基础设施网络安全框架北京手机版网站制作网站上线北京信息安全培训机构网络信息安全等级保护信息安全介绍网络营销战略特点是什么网上平台营销策划网络安全管理所火热1990,武长风敲开时代蛋壳,重生而出。 望着穷酸的家庭,高额负债,负气出走的老婆…… 他稳定心态: “先别慌,赚特么一波在说……” 唉? 这里有个野生的女骗子,一个大饼砸下去,收入囊中,为我所用。 女骗子:老娘行走江湖多年,从来未见过如此厚颜无耻之人! …… 大国崛起,工业为王!30个看似普通却命运非凡的高中生,被一个代号“规则者”的人拉进了四个风格各异、极端刁难的游戏中。他们不仅要在这些游戏中挣扎着活下去,而且还要留意身边的人——因为,规则者,就潜伏在他们30个人之中。 极端严寒与世隔绝的“生命款待”,互相算计自相残杀的“血色追逐令”,甚至还有崩塌世界的“末日丧尸游”……你猜,他们谁会活下来,谁又是规则者?!踌躇满志考大学,不想2022高考竟是如此之难!考完英语那天下午,林易仰天长啸,痛哭流涕!无颜回去面爹娘,只能凭着手机缓解心绪,谁想一场奇异正向他驰来……九龙大陆,强者为尊,武道一途,与天争命,且看一朝皇子,凭三尺长剑,如何皇临天下!武道巅峰,谁为皇? 为了心中的一丝执念,阳炎勤修武,争太子,夺皇位,战天下,历生死,证武道,破轮回! 号令天下,莫敢不从!上古时期,穷奇一族蒙冤困于羽山。万年之后,羽山穷奇族内乱,穷奇王将主角陈怀风送往八荒。 天光照海,星月从之;肝胆照心,妖灵契之;死生相从,以卫以征。契成!——妖灵契约可御兽; 天有白溪,云海可舒;地生白溪,江河不枯,青丘白溪有一枪,可擎天、可贯海!——妖族也热血; 日月昭昭,神血殇殇;天地之间,八荒之内,凡我族类,死守羽山,莫敢再犯!——族群万年使命如何抉择? 神族见死不救,人族背信弃义,八荒存亡之际,且看我陈怀风如何讨还公道!这一次,所有的答案,都保持了沉默重生战国末年,白仲成为秦国攻打赵国战场上的一个新兵。 正值嬴政横扫六合,统一天下之时,战乱频起。 白仲获得战神系统,杀敌就能变强,杀敌就能立功封爵,走上人生巅峰。 依靠秦国的军功爵位制度,白仲从一个新兵,通过不断杀敌,立下无数军功,成为大秦百万锐士的统帅,兵锋所过,六国俯首。 王翦:白将军一人,可抵千军万马。 蒙恬:白将军却匈奴七百余里,胡人不敢南下而牧马。 王绾:白将军,血手人屠,嗜杀如狂,每战必血流成河,尸横遍野,有伤天和。 六国贵族:秦有白仲,我等复国无望! 嬴政:白仲,寡人之武安君白起。 白仲:我比白起还要凶残!山道弯弯(下)以作者高中生活及其社会生活为题材,分《高中校园篇》、《回忆亲人篇》、《社会工作篇》、《欠债还钱篇》和《贵人相助篇》五部分,每部分大概20章,以自己的亲身经历,告诫读者,使读者少走弯路,哪怕能为读者起到一点点的警示作用,也满足了作者创作的初衷。射程之内便是真理! 一切恐惧来源于火力不足! 当有金丹期修士在你面前耀武扬威,那你只需要拿起手里的大狙,和他好好讲道理! 当你不小心得罪一个宗门,那火力覆盖,饱和式打击你一定要试试。 什么?化身老怪组团来搞你?那这颗大当量核弹一定能告诉他们什么叫“世界核平”本部作品纯属虚构的一部农村里的故事,读来耐人寻味……
网站上线 信息安全第五 空间 中国风配色网站 含有营销字的宣传语 茶叶广告营销案例 长安网站优化 网络安全有什么问题 大石桥网站 国务院关于大力推进信息化发展和切实保障信息安全的若干意见 网络营销的出发点 存不住钱的原因分析【www.richdady.cn】 如何改善亲子关系?咨询【www.richdady.cn】 家庭关系的矛盾化解【www.richdady.cn】 孩子不爱读书的家庭教育【www.richdady.cn】 暗恋的情感释放咨询【www.richdady.cn】 内心恐惧胆怯的自我提升咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 营养不良导致的头脑混沌威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子不爱读书的阅读习惯咨询【σσЗ8З55О88О√转ihbwel 前世今生的轮回解析咨询【企鹅383550880】√转ihbwel 感情纠纷的情感疏导【企鹅383550880】√转ihbwel 缺心眼的前世记忆【σσЗ8З55О88О√转ihbwel 感情纠纷的前世记忆咨询【微:qq383550880 】√转ihbwel 发育倒退咨询【σσЗ8З55О88О√转ihbwel 心特别累的案例分享咨询【www.richdady.cn】√转ihbwel 干扰【www.richdady.cn】√转ihbwel 外灵【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋故事咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 发育倒退的医学检查咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份如何影响事业发展?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel nike传统营销的案例 网络营销学习网 网络营销师 达内 信息安全等级测评师证 好网站范例 南京网站建设哪家专业 青色系网站 网络安全语录网站设计报价 泉州网站建设 整合营销包含哪些方面 网站内容维护 国家信息安全产品认证 2015信息安全会议 财政部网络安全 中国计算机网络安全 网络安全培训 下载 专业 信息安全,-1 企业网站建设服务热线 北京大学网络与信息安全实验室 病毒营销模式有哪些 群营销方案 含有营销字的宣传语 信息安全保护等级三级 天津网站建设咨询 网站模块有哪些 网络安全技术的新认识 重庆网站推广营销 网络安全技术的新认识 网站建设技巧 负面营销模式 网络营销的营销手段 网络营销总结与分析 制作企业网站 制作企业网站 专业 信息安全,-1 e mail营销有何特点 tools网络安全 网络营销的支持度 信息安全管理体系实施案例及文件集 大型网络安全公司排名 网络安全语录网站设计报价 信息安全第五 空间 网络专业的网站建设 网站制作 手机 网上平台营销策划 提供商城网站制作 社会化营销的特点 重庆微信的营销方案 北京手机版网站制作 信息安全简称 服务营销4p理论 e mail营销的流程 太原优化型网站建设 北京手机版网站制作 顺德网站优化公司 财政部网络安全 绍兴网站建设公司 顺德网站优化公司 网络营销一般学多久 网站转换率 苏州网站优化 武汉公司网站制作 天津网站建设咨询 中国网络及信息安全法 中华人民共和国工业和信息化部就业指导中心认证网络营销师 网络社区营销 信息安全服务年会 泊头网站建设 中国计算机网络安全 微信营销的案例分析 赣州网站制作 网络信息安全主动防御 长沙网站开发 好网站范例 网站上线 青岛做网站的公司排名 中国网络及信息安全法 长安网站优化 网络营销自学好学吗 合肥微网站 xs 信息安全 门户型网站特点计算机网络安全等级? 网络安全进企业 整合营销包含哪些方面 2015广东省信息安全 xs 信息安全 汕头 网站建设网络安全提供 中国国家信息安全杂志 信息网络安全培训 汕头 网站建设网络安全提供 品牌型网站 中国风配色网站 美国国家信息安全保密总统令 译文 网络营销一般学多久 网络营销环境调查 网站建设技巧 中国国家信息安全杂志 许可营销 网络安全工作人员培训 群营销方案 2016年网络安全大事记 主机信息安全审计系统 泉州网站建设 信息安全保护等级三级 网络专业的网站建设 2017年网络安全问题 Fastcgi做网站 网站设计技术成都 网站建设 中软国际信息安全 全网整合营销公司 网络安全内容大全 官网营销 2017企业网络营销 网路营销和网络推广 信息安全 需求 网站模块有哪些 北京大学网络与信息安全实验室 重庆网站推广营销 信息网络安全培训 深圳微信营销神器 网页营销qq 360网络安全电影院 官网营销 大石桥网站 整合营销包含哪些方面 搜索引擎营销怎么样 广州飞天诚信信息安全 工厂营销推广 病毒营销的策略 信息安全人才需求图 专业 信息安全,-1 网络营销的营销手段 按照网络安全等级 物联网信息安全保护公司 网络信息安全主动防御