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
营销网站优点亚马逊服务营销策略东莞 网站设计太原网络营销公司排名大学信息安全委员营销型网站推广方式的论文个人信息安全评估报告甘肃做网站哪家好网站制作计划营销流行语网络新闻营销的特点秦,原名姬玄惊(字:云帆)本是一位贫困的农家少年,直到有一天他被接去无双王朝的天下城,他才得知自己的身份——天下城城主私生子。因这一重身份,受尽凌辱、招受摧残。16岁时,母亲逝后脱离无双王朝,成了一名剑客...他与兄弟开辟新王朝、斩尽天下一切敌,唯独没有斩去人心。他开辟新时代,拯救亿万众生,唯独没有拯救自己。男主一家是代代相传的除妖世家,更有神仙,阎王给的金字牌坊,自唐代以来,出了不少斩妖除魔的天才,但是到了21世纪,妖怪基本上斩的差不多了,委托越来越少,天庭地府不断裁员,家族越来越衰落破败,到了男主这一代,只剩下爸爸和他一起,家里更是穷的揭不开锅,这时,好不容易收集齐山海经,却被无名小妖偷走,圣上大怒,委托男主和其他除妖师找回遗失的山海经……网瘾少年林徉魂穿大武朝,凭借着网上冲浪的经历纵横武朝! 造纸?我会古法造纸; 赶海?这个季节的沙滩有很多花旦蟹; 行医?脸上出现蜘蛛斑,一抹无痕。 …… 异界男儿就该征战四方!可当我和我的怨种队友们在异界终于出人头地的时候,我才发现原来只有我一个是这异界的本地人!21世纪的图书管理员李北牧,魂穿架空古代。 意外发现上辈子看过的书,竟然都能只字不差地回忆起来,有这样的金手指在手,怎么也能混的风生水起吧? 太平当盛世,他起初的目的只想在这没有人权的封建社会当个富家翁悠闲度日。 …… 多年以后,李北牧回首前尘,身后已是早已逝去的敌人以及累累白骨。 “不是我下手太狠,只是有些人,实在是太经不起折腾了。”李·大楚国相·定北公·世界首富·无冕之皇·北牧如是说道。民间口口相传着一个故事: 世间本蕴涵丰富的灵气。修道之人浅则延年益寿,深则飞天遁地、排山倒海,超脱万物之规律。 但在400多年前,一位通天地彻的神秘道人不知算出了何种天机,竟不惜魂飞魄散,道行尽失,也要与“天”抗衡。 自那以后,世间灵气变得十分微弱。虽仍有修道之人,但都修行浅薄。与登仙再无机缘。 18年前,一起发生在龙虎山的“离奇盗墓案”让方介白失去了双亲,但是他坚信自己的父母没有死。 也是自那以后,在这座城市里,不断有着灵异的事件情发生在方介白的身上。 这让一个坚信唯物主义的成年人无法用科学理解这些超自然现象,直到方介白发现......还没看完一页,叶牧就忍不住合上了少年时期的日记本。 “我这写的是什么中二日记啊?” “太羞耻了!” “会社死的吧?” 【叮!神级日记系统激活!】 【自动为宿主的日记购买全球热门推荐!】 【全球点赞过千万,解锁全新功能!】 【恭喜宿主百分百还原事件,奖励混元大罗圣斧!】 受到混元大罗圣斧影响,两个世界不再平行,出现大量未知干涉现象。 殷墟石壁惊现日记,轰动全球! …… 叶牧震惊了。 他写的中二日记竟成真的了!宋帝都临安府爱国人士:吴俊振,与用时光机穿越过来的现代大学生:马维,两人一起被龙卷风漩涡黑洞带着,穿越到了明崇祯十六年公元1643年兴都留守司显陵卫境内,在机缘巧合之下他们俩主动应征入伍参军,从此开启一段帮助大明帝国收复失地的旅程,本文群号799968110"三阴绝脉"者,史书所载;凡患此症者非但终生不能修武,并且几乎无一人能侥幸活过十三岁。命运关上所有的幸运之门,却开了一扇窗,令其在绝境中峰回路转,当其踏着尸山血海攀上巅峰之时,骇然发现一个惊天之秘。暮然回首,惊觉自己脚下的这片世界幌若恒河之沙粒,渺若微尘。何去何从……灵界中突然出现了不寻常的危机,这让灵界第一人林钧不知如何解决,而灵界之外,无数强者纷纷越界,想踏平灵界。 林钧苦守无果,最终无奈之下,他做出大胆决定,剥离人性,只身前往灵界之外,寻找问题根源,而分离出的人性,将会修炼灵界之中最强神法,重回大陆之巅,寻找救世之法。
企业网站建设目标 注册信息安全员证书 山东大学信息安全排名 川大网络安全学院 营销型网站怎么收费标准 美国网络和信息安全组织体系透视 甘肃做网站哪家好 网站怎么设置支付 石家庄公司网站建设 网络安全技术支持 前世老公的识别方法【www.richdady.cn】 长期头脑混沌可能是哪些疾病的前兆【www.richdady.cn】 冤亲债主的化解方法咨询【www.richdady.cn】 事业不顺的职场瓶颈如何突破?咨询【www.richdady.cn】 前世今生的梦境解析【www.richdady.cn】 精神不振的自我提升咨询【企鹅383550880】√转ihbwel 去世的父亲的前世因果【微:qq383550880 】√转ihbwel 改善亲子关系的技巧咨询【企鹅383550880】√转ihbwel 冤亲债主干扰的心理影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 亲子关系的改运方法威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 冤亲债主干扰的常见案例威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的解决方法咨询【企鹅383550880】√转ihbwel 冤亲债主干扰的根源是什么?咨询【www.richdady.cn】√转ihbwel 脑部不清晰的前世记忆咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的投资建议威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿的康复训练咨询【企鹅383550880】√转ihbwel 前世缘份对现世的影响咨询【www.richdady.cn】√转ihbwel 不爱读书的环境影响【σσЗ8З55О88О√转ihbwel 孩子压力大的改运方法【σσЗ8З55О88О√转ihbwel 性压抑【www.richdady.cn】√转ihbwel 网络新闻营销的特点 做网站资讯 温州做网站哪家好 营销和行销 广州网络营销培训 山东大学信息安全排名 关于网络信息安全 甘肃做网站哪家好 亚马逊服务营销策略东莞 网站设计 网站移动站 网站注册 福州医院网站建设公司 网站网页 企业网站维护 网站简单化 营销网站优点 南昌网站建设 运行 打开网络安全中心 国家网络安全信息中心招聘 网络营销有什么证 东营网站设计 b2b外贸网站 网站网页 明星营销 营销具电信网络安全密匙忘记 滴滴营销活动 江苏省网络安全协会 网络营销能力秀互粉 网络安全与防火墙技术的研究 太原网络营销公司排名 信息安全研究所 美国网络安全峰会 大学信息安全委员 成都网站设计公司哪家好 权威的网站建设网站设计和制作费用 网络信息安全月报 网络信息安全实施意见,-1 南京网站设计公司 网络信息安全工程师认证 企业网站建设目标 网上营销的思路 网络安全评审 营销网站优点 网络营销的课程 网络安全评审 全球网络安全50强 厦门信息安全教授 信息安全专家证书 信息安全认证机构,-1 网络营销有什么证 网站制作计划 湖南品牌网站建设 成都网络安全公司排名 网络安全检查通报 互联网营销公司有哪些 经典新媒体营销案例 重庆王网站制作 电子商务 网络安全 OpenSSL与网络信息安全 598营销软件站 专业的常州做网站 网络安全网关 网络安全和信息安全的区别 广汉网站 大学信息安全委员 美国网络和信息安全组织体系透视 网络安全技巧 租车网站建设 信息技术与信息安全 防范系统攻击的措施包括 京东的营销渠道设计 租车网站建设 专业的常州做网站 国家网络安全信息中心招聘 上海科技网站建设 亚马逊服务营销策略东莞 网站设计 全球网络安全50强 网络信息安全考试 远程接入过程管理敏感国家 网站开发与网站制作 网络新闻营销的特点 东营网站设计 他人委托我做网站 微博粉丝通营销 网站的网页 中国信息安全测评中 网络推广营销系统 有动效网站 信息对抗与网络安全 信息安全简介,-1 政府如何应对网络安全 营销流行语 营销专业网站 网络安全产业报告 陕西省 信息安全 竞赛,-1 2017信息安全会议 太原 电子商务 网络安全 网络安全技巧 网站开发与网站制作 南昌网站建设 2017信息安全会议 太原 营销北京 上海建设网站制作 杭州网站制 营销北京 网上营销的思路 网上营销项目 信息安全形势 保定网站制作推广公司 大学信息安全委员 网站注册 这样建立自己的网站 linux 网络安全 命令 权威的网站建设网站设计和制作费用 信息安全的特征 江苏省网络安全协会 网站怎么设置支付 网站网页 网络信息安全月报 国家网络安全信息中心招聘 上海手机网站建设电话 网站简单化 网站制作方案 河南网站制作 网络安全检查通报 福州医院网站建设公司 网络信息安全小组成员 温州做网站哪家好 598营销软件站 美国网络安全峰会 这样建立自己的网站 网络信息安全领导小组 佛山网站制作公司 网络安全的四梁八柱 微博粉丝通营销 信息安全等级测评报告案例 网络安全的四梁八柱 美国网络安全防护技术 镇江网站公司 2017西安信息安全大赛 网上营销的思路 信息公司营销计划 广州网络营销培训 网络安全关键词2017 网络安全评审 研究院信息安全管理 网络营销有什么证 信息技术与信息安全 防范系统攻击的措施包括 2017网络安全案例分析 如何建立信息安全标准 信息安全简介,-1 nsc 网络安全 佛山网站制作公司 网络信息安全实施意见,-1 福州医院网站建设公司 杭州网站制 b2b外贸网站 注册信息安全员证书 营销优势有哪些方面 签名档营销 江苏省网络安全协会 网络安全与防火墙技术的研究 网络安全综合实验 2016年信息安全大会 签名档营销 中国网络安全法 国家信息安全局成都 长春 建网站 信息网络安全评估 移动商务营销案例 营销型网站推广方式的论文 医疗网络安全 珠海动态网站制作外包 企业网站维护 营销型企业网站 网站制作方案 网络信息安全领导小组 近年来互联网用户变化的情况分析而这些变化对企业网络营销的影响? 滴滴营销活动 营销型网站怎么收费标准 网站的步骤 网站策划图 帽子网络营销策划方案 安卓网络安全协议沈阳网站优化排名 工控网络安全龙头公司 营销型企业网站 信息安全研究所 信息安全等级测评报告案例 2017 信息安全展会 石家庄公司网站建设 白帽子-高端信息安全培训 网络安全技术支持 营销网站优点 营销 沙龙 网站多少个关键词 信息网络安全评估 四川省计算机信息安全行业协会 太原网络营销公司排名 信息安全机构认证 明星营销 网络信息安全工程师认证 中国信息安全测评中 网站策划图 网络信息安全月报 移动商务营销案例 网络安全周 车联网 互联网营销软件有哪些内容 搜索引擎营销的价值 网站网络安全制度内容 网站的步骤 网络安全技术支持 运行 打开网络安全中心 关于网络信息安全 网络安全评审 2016年信息安全大会 国内外的网络营销理论 我国信息网络安全现状分析 营销和行销 网站移动站 互联网营销软件有哪些内容 网络安全关键词2017 网络营销能力秀互粉 镇江网站公司 营销型集团网站建设 信息安全安全前沿技术有哪些 山东大学信息安全排名 广州网络营销培训 网络信息安全工程师认证 企业网站建设目标 国家网络安全学院 武汉 网络营销有什么证 信息安全的特征 用别人的网络安全吗 营销具电信网络安全密匙忘记 网络安全信息周安全 厦门网站开发 长春 建网站 网站简单化 川大网络安全学院 甘肃做网站哪家好 企业网站维护 关于网络信息安全 营销型集团网站建设 网络安全网关 北京网站开发制作公司 厦门信息安全教授 网络安全大讨论 网站如何推广 澳洲 信息安全专业 网站的网页 长春制作网站 川大网络安全学院 天津做公司网站 美国网络安全防护技术 信息安全专家证书 湖南品牌网站建设 微博粉丝通营销 有动效网站 南京网站设计公司 帽子网络营销策划方案 国家网络安全信息中心招聘 网络安全和信息安全的区别 成都网站设计公司哪家好 598营销软件站 个人信息安全评估报告 2017信息安全会议 太原 四川省计算机信息安全行业协会 成都网络安全公司排名 他人委托我做网站 国内外的网络营销理论 网站怎么设置支付 政府如何应对网络安全 厦门网站开发 北京网站开发制作公司 互联网营销公司有哪些 美国网络安全防护技术 政府如何应对网络安全 王老吉地震营销 网络安全检查通报 全球网络安全50强 王老吉地震营销 这样建立自己的网站 关于网络信息安全 研究院信息安全管理 网站开发与网站制作 珠海动态网站制作外包 佛山网站制作公司 滴滴营销活动 长春制作网站 OpenSSL与网络信息安全 租车网站建设 网络营销的课程 网上营销项目 电子商务 网络安全 网上营销的思路 网络安全产业报告 聊城定制化网站建设 温州做网站哪家好 网络新闻营销的特点 网络推广营销系统 信息安全的特征 美国网络和信息安全组织体系透视 2017网络安全案例分析 营销和行销 成都网络安全公司排名 信息安全等级测评报告案例 我国信息网络安全现状分析 移动商务营销案例 长春制作网站 营销专业网站 b2b外贸网站 网站多少个关键词 白帽子-高端信息安全培训 营销流行语 信息安全安全前沿技术有哪些 网络营销有什么证 聊城定制化网站建设 运行 打开网络安全中心 签名档营销 厦门信息安全教授 信息安全机构认证 nsc 网络安全 国家网络安全学院 武汉 营销型企业网站 安卓网络安全协议沈阳网站优化排名 互联网营销软件有哪些内容 2014年网络安全发展现状 上海手机网站建设电话 东营网站设计 滴滴营销活动 美国网络和信息安全组织体系透视 营销专业网站 湖南品牌网站建设 网络信息安全考试 远程接入过程管理敏感国家 海南网站设计 网络安全和信息安全的区别 网络营销的课程 网络安全动画片 2017西安信息安全大赛 阿克苏网站建设 福州医院网站建设公司 网络安全信息周安全 这样建立自己的网站 网站网络安全制度内容 网络安全技巧 网站制作方案 微博粉丝通营销 海南网站设计 租车网站建设 陕西省 信息安全 竞赛,-1 网络安全问题的要求 网络新闻营销的特点