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
信息安全学院笔试免费建立个人网站网络安全大赛比什么网络信息安全防范技术研究网络安全资质营销型网站建设定制苍南网站建设网站seo信息安全 技巧商务网站制作公司美国的网络安全功防有朕在,休叫山河破碎,五胡乱华,汉家儿郎当奋起反抗,扬华夏文明,汉家天下永固,大燕铁骑纵横天下,朕决定开启航海殖民时代,凡日月所照,山河所至,皆为燕土,一寸山河一寸血,华夏子民当屹立世界之巅。我叫宋小江,我有108个师姐,大师姐倾国倾城,武力滔天! 二师姐温文尔雅,琴棋书画样样精通! 三师姐医术超凡,妙手回春…… 她们一会儿说要把公司给我,一会儿让我当殿主,一会儿又让我当战神,这可如何是好? 在线求解,挺急的!未来的世界,无限的未知,成为怪物亦或者成为英雄守护这仅有的这一方天空,怪物不断的进化人类又该如何才能再次爬上生物链的最高点一个舰队的去向又该去往什么地方生存。 没有任何人想要放弃,只要有一丝希望便要生存下去。[不要放弃,和我一起生存下去]末世+自然灾害+无系统+求生 气候突变,打破了世界原有的平静,冰川时代降临,幸存者挣扎求生。 面对未知的灾难和危险,一个个小人物组建到一块,共度危机,只为在这末世之下,走的更远辛强高中毕业后,为了考大学,得了一场大病,三次在市解放军陆军医院精神科治疗。 以后为了考成人高考,打县长进了看守所,姐姐在市中级法院上诉,辛强在无罪释放。 最后,辛强终于毕业于省财贸干部学院,求学的梦才实现了。 男护士转生异世界,竟然被职业评定选择成了最稀有职业-男性圣职者?本来以为可以在异界享受人生,迎娶公主,走上巅峰,没想到卷王居然就在我身边?内卷什么的之前已经受够了!为了对抗内卷,全都点了治愈,男圣职者平凡而又非凡的异世界生活,从现在开始!漆黑一片 你:这?是哪里,我?又是谁。 陌生的声音:“你好啊,来自异世的意识, 欢迎来到次元。” 你:意识?次元? 陌生的声音:“在一切开始之前,请记住我的话,不要试图冲破法则,不要触动禁忌,更不要死…不要半途而废,就做一个旁观者就行了,好了就让一切开始吧,睁开你的眼” 声音消失了 你突然听到了风声,很大,但你却感受不到,你慢慢睁开眼,发现自己正在高空自由落体,还没等你搞清楚状况,你已经落地了,由于你存在特殊所以你安然无恙,落地后你遍开始了所谓的旁观。 一个因为创业失败的物理老师为了人重生2000年,新的人生将开启官场巅峰异世大陆,强者为尊 得造化者视天下万物为刍狗,修剑道者视天下万兵为锹铲,筑剑心者俯视苍天道长夜永梦。 且看昔日修剑院的扫地童子,如何得天地造化,转世间风云……“林诺,我不会放过你的。” “珍惜你的所拥有的时间吧,毕竟你拥有的时间可是不多了哦。” “不要走。” “你好,我叫星辰,星辰大海的星辰。”(一笑) “她是谁?我。。不记得了。” “这个世界,,不存在?” “我叫林诺,是一名高中生。。。” “前辈,让我们一起来玩游戏吧,哎嘿嘿……”
网络营销学校 网站所有权 政务网络安全 网站制做 模板网站与定制网站区别 小米手机发布网络营销 网站所有权 ps制作网站过程 淄博做网站 网络营销的国内外研究现状 去世的母亲的去向解析咨询【www.richdady.cn】 邪灵咨询【www.richdady.cn】 家庭关系的教育建议【www.richdady.cn】 婴灵的超度方法有哪些?咨询【www.richdady.cn】 孩子压力大的教育建议【www.richdady.cn】 失业的咨询技巧咨询【www.richdady.cn】√转ihbwel 内心恐惧胆怯的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 意外的前世修行咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世缘份的前世影响【σσЗ8З55О88О√转ihbwel 儿子抑郁症的自我提升咨询【企鹅383550880】√转ihbwel 升迁障碍的案例分享【www.richdady.cn】√转ihbwel 如何改善精神不振的状态【σσЗ8З55О88О√转ihbwel 暗恋的心理调适【微:qq383550880 】√转ihbwel 前世老公的前世影响【www.richdady.cn】√转ihbwel 亲子关系的改善方法咨询【企鹅383550880】√转ihbwel 孩子厌学的前世因果【企鹅383550880】√转ihbwel 投资项目的环境影响【σσЗ8З55О88О√转ihbwel 无形干扰的前世故事【企鹅383550880】√转ihbwel 升迁障碍的职场瓶颈如何突破?【微:qq383550880 】√转ihbwel 有官司的前世因果【企鹅383550880】√转ihbwel 网络数据营销 浙江省网络安全宣传周 电子商务网络营销实验报告常见的网络营销方式并加以适当详述 搜索引擎营销包括 营销型网站有哪些出名的 网络消费者的营销手段 甘肃营销型网站制作 食品类b2c网络营销 北京网站建设公司收购 营销网站的筛选 ted演讲 网络安全 专业网络安全公司 一个网站的主题和设计风格 小米手机发布网络营销 网络安全技能大赛ctf 国家推进网络安全()服务体系建设网络信息安全实验,-1 深圳电子商城网站设计 2016年网络信息安全 量子计算与网络安全 最专业的做网站公司 企业手机网站建设策划书 email网络营销的现状 聚美优品产品营销助理 联想电脑网络营销 信息安全学院笔试 合肥整合营销平台 网站数据包括哪些内容 佛山网站建设怎样做 美国的网络安全功防 国家信息安全监管部门 湖南微信网站营销 广州市计算机网络安全协会 网络安全公司起名 网站优化 通过提高wed可用性构建用户满意的网站 pdf 网站设计价格大概是 网站打开速度优化 网站免费认证 2016年网络信息安全 网络营销的国内外研究现状 网络安全技术对抗赛 企业手机网站建设策划书 审计机关网络安全自查 北京网站建设公司收购 微网站定制 重庆营销型网站开发 苍南网站建设 国家推进网络安全()服务体系建设网络信息安全实验,-1 军用信息安全产品认证 查询 网络安全 研究机构 ps制作网站过程 网站建设哪家公司好 西丽网站设计 网站建设申请 网络营销的国内外研究现状 食品类b2c网络营销 国家推进网络安全()服务体系建设网络信息安全实验,-1 网络工程师必读——网络安全系统设计 量子计算与网络安全 微信公众号市场营销方案 手机app网站建设 玩具外贸网站模板 网站数据包括哪些内容 2016年网络信息安全 全网营销服务套餐 国家推进网络安全()服务体系建设网络信息安全实验,-1 网络安全资质 2017信息安全峰会 成都 西安模板网站建设 医院信息安全解决方案 怎么建网站 病毒营销的发展趋势 2016年网络信息安全 佛山学校网站建设 山东网站优化公司 合肥整合营销平台 广东营销网站建设服务公司 企业网络安全解决案例 网站建设网站 国家信息安全监管部门 怎么学网络整合营销 小米手机网络营销服务 网络安全技能大赛ctf 手机app网站建设 网络信息安全防范技术研究 桌面端的信息安全 佛山网站建设怎样做 网站免费认证 网络营销的国内外研究现状 工业控制系统信息安全产业联盟 网络工程师必读——网络安全系统设计 为什么网站生成后不显示教育式营销 使用下载的整站asp源代码建设自己的私人网站需要注意哪些 营销型网站建设定制 无锡优化营销 深圳推广营销策划 模版型网站 国家网络安全局官网 网络营销学校 营销新创意 网站如何申请微信支付 阿图什网站 网络安全资质 uiwebview网络安全配置 营销e术 网络安全预警工作情况 佛山学校网站建设 网站建设申请 网站注册免费 陈舒 福建省网络与信息安全测评中心 重庆整合营销传播公司 餐饮互联网营销 案例 电子商务网络营销实验报告常见的网络营销方式并加以适当详述 营销型网站有哪些出名的 网站建设网站 芜湖网站开发 网络安全 研究机构 湖南微信网站营销 政务网络安全 成交率营销 甘肃营销型网站制作 网站优化怎么做 佛山网站建设怎样做 天津网站建设公司 手机网络营销的案例 可口可乐网络营销计划 做网站的软件 浙江省网络安全宣传周 东莞手机网站建设 审计机关网络安全自查 龙华网站建设 无锡优化营销 营销型名片 直接营销产品 广州网站制作 佛山学校网站建设