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
信息安全等级保护发布对营销的理解和认识全屏类网站中国企业网络安全问题解决案例信息安全的公司排名,-1佛山网站建设教育行业营销策划方案什么创网站吉安网站建设全国网络安全办公室叶凡上一世的仙王老婆重生归来,找到叶凡带他走上修仙路。 斩魔帝,斗五宗,破天穹,打开仙路,直杀天穹,带领全民修仙。 我的时代谁敢称无敌!上来一战! 以双修正道!  【练笔作品,永久免费】 “希雅,我要学技能!”   “好嘞!安排!”   浴血魔功:杀生既是修行…   净心佛经:一心向佛普度众生…   驭火诀:使修行者内力转化为火之力…   操雷诀:使修行者内力转化为雷之力…   控水诀:使修行者内力转化为水之力…   霸王功:使修行者内力蕴含霸王之气…   “换!”   “好嘞~”   ……   “再换!”   ……   “这些狐妖又漂亮又能打!打包!”   ……   “这些兵器都好喜欢!打包!”   ……   “这座山这草皮都不错!搬走!通通搬走!草皮都给他拔下来!”   ……   “这座岛上好多鸟,抓走,通通抓走!”   ……   莫情:“我们的宗旨是什么?”   众妖:“所到之地,寸草不生!”   莫情:“具体呢!”   众妖:“活的都抓!大山都掏!草皮都扒!大树都拔!”   莫情:“很好!”   ……   莫情:“你们的任务是什么?”   狐妖:“抓妖怪!掏大山!扒草皮!拔大树!”   莫情:“还有呢?”   狐妖:“每天训练生孩子!争取生出好孩子!”   ……   莫情:咱就是一个外挂有点多的小修士,咱可没什么坏心思…流星雨来,小行星至,地球面临灭顶之灾。 劳士力前往太空执行任务,返航途中救下乔伊娜。 火山灰笼罩地球,航天飞机不能降落。 几近绝望的劳士力和乔伊娜,以登录梦幻社区虚拟世界寻求心理上的宁静与安慰。 他们将承担起人类繁衍与发展的重任…… 一切都在AI控制中……玄龙大陆,以武为尊。 少年叶平安得到败天武帝的至尊天眼,从一个卑微的蝼蚁,成为至高无上的绝世武帝! 一路上白骨累累,红颜多娇路飘摇,无敌路上太寂寥!为了男人的承诺,萧晨强势回归,化身美女总裁的贴身保镖,横扫八方之敌,谱写王者传奇!   他——   登巅峰,掌生死,醒掌天下权,醉卧美人膝! —————— 小舞的微信公众号:寂mo的舞者,可以去关注哦! 小舞的QQ:1589045849,可以去加好友! 唯舞独尊①群:545765633!   龙峰,某特种部队退役后,一次乘坐游轮遇到飓风……醒来时,龙峰发现自己出现在一处岛屿的海滩。这处岛屿荒无人烟,里面处处杀机,有吸食血肉的树怪,还有身如巨山的凶兽……生存还是毁灭?龙峰开始了自己在异大陆的传奇人生。横穿古今未来的巨大布局,万世寂灭即将来临,大千世界因果加身,神秘莫测,该如何一步步揭开真相。我本根骨被废,恬淡一生。 所幸,遇见了吞吞,帮我炼丹,帮我炼器,帮我解毒,帮我完善功法…… 你叫一声主人,我用诸天相报!现代修仙小说,不写狗血剧情,绝对完美结局。这个世界是有修真者,他们隐于常人之中,刘芒就是他们其中的一类,只是他自己尚未发现自己的奇特之处。 一起跨国走私案,佛牌,成功的将这个不普通的普通人拉进了这个漩涡。 湘西赶尸人,东北出马弟子,江湖赊刀人,摸金校尉,风水师..... 欢迎来到修真者的世界。
公司互联网站全面改版 建外贸网站的 信息安全控制措施是指 网络安全评估:从漏... 网站建设常出现的问题 全网营销系统是真的吗 信息安全服务高级工程师 上海网络安全大会 温州网站设计 如何选择番禺网站建设 孩子不爱读书的家长引导咨询【www.richdady.cn】 忧郁症的环境影响咨询【www.richdady.cn】 感情纠纷的解决方法【www.richdady.cn】 前世今生的故事如何影响现代生活?【www.richdady.cn】 亲子关系的教育理念【www.richdady.cn】 孩子不爱读书的应对策略咨询【企鹅383550880】√转ihbwel 与公婆前世咨询【企鹅383550880】√转ihbwel 投资项目的风险评估威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 孩子学习不好【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世老公的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 去世的母亲的前世案例威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的故事有哪些真实经历?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世缘份的前世解析【微:qq383550880 】√转ihbwel 人际关系不好的表现及原因咨询【σσЗ8З55О88О√转ihbwel 意外的前世影响咨询【σσЗ8З55О88О√转ihbwel 意外的前世故事咨询【企鹅383550880】√转ihbwel 有官司的预防措施【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际沟通障碍解决【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 大龄剩女的幸福指南咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的咨询技巧【微:qq383550880 】√转ihbwel 公安网络安全工作 微信营销培训总结 中山网站优化 我国中小企业应该如何进行网络营销采取的策略有哪些? 北航信息安全专业 网络整合营销的特性 病毒性营销 数字化营销的特点 策略营销 西安网站 微信营销有多少种方式 营销的表现形式有() 网络安全 逆向 高端网站设计 温州网站设计 万网做网站 国内网络安全50强 成都网络营销 网络安全投诉 做三年网站需要多少钱 门网站制作 企业网络安全解决步骤 信息安全顾问专业能力 关键词霸屏营销 信息安全等级保护发布 网络营销职能关系 内蒙做网站国内网络安全 视频营销vip教程 网络广告营销的优缺点 广州 网站制 国家信息安全评测证书 视频营销vip教程 网络安全 基地 合肥网络安全 自己如何创立网站 百度知识营销在哪里 关于营销的网站有哪些内容 关于营销的网站有哪些内容 网络安全技术之常见病毒种类与杀毒软件分析 信息安全专业企业 公安网络安全工作 合肥网站建设公司 标准网站优势 铜陵网站建设 网络营销 技术入股 影楼网络营销 企业营销的方法有哪些 网站导航条代码 上海专业做网站排名 edm营销招聘 哪里的sem整合营销 微信营销培训总结 国家信息安全周 川大信息安全考研 定制网站的好处有哪些 关于手机网络安全的 石家庄手机建网站 广东信息安全测评,-1 免费域名网站的 网络营销ar是什么意思 企业网络安全解决步骤 网络安全 逆向 为什么百度要网络营销 青岛 html5/flash设计开发|交互设计|网站建设 佛山网站建设 营销形网站 全网营销系统是真的吗 哪里的sem整合营销 病毒性营销 工业信息安全公司排名,-1 关于手机网络安全的 泊头网站建设 青岛 html5/flash设计开发|交互设计|网站建设 网络营销师考试 互联网信息安全领导小组 电商网站构建 国内网络安全50强 中国最强信息安全专家 网站信息安全解决方案 吉林信息安全测评中心 企业营销的方法有哪些 网站的方案 5月网络安全大赛 网络安全保卫部门 网络营销战略规划 对营销的理解和认识 广州信息安全 中国企业网络安全问题解决案例 公司信息安全组织架构 金融行业营销案例 洋码头 营销活动 建外贸网站的 cisp培训ppt(中国信息安全产品测评认证中心提供) 商务网站建设 微网页营销o2o营销-上海单仁信息移动科技有限公司 影楼网络营销 网络营销天培营销 吉林信息安全测评中心 信息安全服务高级工程师 国内网络安全50强 天猫网络营销手段 为什么百度要网络营销 关于营销的网站有哪些内容 川大信息安全考研 网络营销师考试 gartner 信息安全2015,-1 网络营销目标是什么 旅游项目网络营销案例 建外贸网站的 我国中小企业应该如何进行网络营销采取的策略有哪些? 昆山网站建设· 广州信息安全 网站信息安全解决方案 活动营销网 朝阳商城网站建设 网络有哪些营销方式有哪些 百度知识营销在哪里 高校信息安全建设方案 川大信息安全考研 工业信息安全公司排名,-1 泊头网站建设 建网站的程序免费 关键词霸屏营销 网络营销推广模式 广州云创通营销手机 网络营销战略规划 企业网络安全解决步骤 网站建设常出现的问题 高大上强企业网站 网络广告营销的优缺点 渭南做网站 自己如何创立网站 华中科技大学信息安全综合设计与实践 微信营销培训总结 谷歌网站地图安天信息安全