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
国家网络与信息安全信息通报中心兼职网站制作大庆网站建设互联网信息安全平台重庆建设网站微博营销图绵阳市公司网站建设网络安全新闻信息网站设计小技巧信息安全业务种类这是一个奇妙的世界,尖端科技已经超越现代水平,而文明发展却还停留在1000年前。在这个世界最强大的帝国中,有一个放荡不羁的青年,在被人击败后偶然得到一本神功,成为城中至霸,却又突然失去全部功法,沦为废人。在神秘高人的帮助下,他重回巅峰,和同伴们一同探索这个大而又神秘的世界,同时,他们也逐渐揭开,这其中蕴藏的秘密……世道不靖,民生皆苦。 黑暗里的幽灵,星空中的刺客。 天上地下屠魔弑神,只为创造一个美好的世界! 他是一个来自异世界的灵魂。 不甘心命运被安排,反感这个恶者逍遥自在,善者不得善终的黑暗世界。 为了实现理想,他一路苟着做人,努力积蓄力量,终于改天换日,重塑乾坤! 天灵大陆,星海行省,罗海城。 辰宇尘的出生地,天灵历308年,他六岁从未见过父亲。一头乌黑的中长发长达24厘米散在后,头发两边的一点披在肩上,显得很是帅气、可爱,虽说只有六岁却又如同成人般的冷静。 世纪之末, 仙路湮灭,前路断绝,动乱时代,宇宙重开,少年叶天重生于异域,从此踏上仙武大道,悟五行,领阴阳,掌握极致力量。堤岸横空,生灵争渡,不详与诡异肆虐。 少年的背后是血与乱,是生灵的悲歌,少年的探寻的是万灵之希望。彳亍前行,万古寂然,永远在路上。桑服也很困惑,不过就是失足落海而已,怎么就换了一个世界。或许世界上真的有平行时空,让他在全新的世界里活出不一样的人生。 新奇的魔法和生活都市 善良的家人和诡异的邻居 还有那个说自己来自什么大魔导学院自称导师的漂亮女人 ................................... 所以,在开始新生活之前,能不能先来个人告诉他,这个世界里,他到底该怎么活下去。为保护女友而伤人的徐枫,入狱三年意外获得一身本领。 没想到出狱后,女友竟然要嫁给当年的仇人。 可怜这瞎眼的女人,本可一步登天,却选择坠入炼狱!穿越到大乾王朝的陈河,入赘叶家,本想着这辈子要不做个赘婿吧。   混吃等死算了。   谁想到新婚妻子娇艳如花,奈何天生体弱,红颜多薄命。   一本《伤寒论*小青龙汤》救了新婚的妻子。   一本《本草纲目》本奉为万世医典。   《神农本草经》济世悬壶,引得天下医道追逐。   多年以后,看着自己的济贤堂开遍大乾,陈河本想着这辈子也就这样过吧,娶个七八房媳妇,生个十几个娃,但没想到大乾内乱。   一纸诏令直达应天。   宣:陈河入宫!他,虽是庶子,但却是王国八大贵族之一格林家族内定继承人,长相虽平凡,但他的心不甘于平凡。虽然被人陷害、不得不被流放追杀,但天降系统,助他成神。且看一个小领主如何借助系统和奇遇,一步步崛起,最终称霸大陆.....韩宁一觉醒来,发现自己穿越回到2002年,姚明刚刚登陆NBA的那一年。 本来想着去休斯顿火箭队应聘一个助理教练的职位,却没想到阴差阳错间直接接替鲁迪成为了球队的主教练。 火箭队,执教姚明,想想就很激动有没有?! 系统:别高兴的太早,给我带新秀姚明去夺冠! 韩宁:啥玩意?! 带2002年的火箭队夺冠?! 这可不是未来已经成为联盟顶级巨星的姚明,麦迪也还没来呢! 球队里还有一堆中看不中用的角色球员和垃圾合同。 要知道在这一年,奥尼尔还在巅峰期,在赛场上大杀四方。马刺队的三驾马车全部集齐。 这种地狱级难度,你让我率队夺冠?!元宇宙经典游戏出马传奇,沈庸一人独开四号,各有所长 另有三位妹妹辅助,四人共同纵横驰骋,称霸游戏!
信息安全 c++ 东莞长安网站优化公司 网站设计小技巧 一个好网站 营销包含哪些 西安网站托管 合肥市做网站的公司有哪些 潍坊网站推广 大庆网站建设 网站怎么创建 前世老公的前世案例【www.richdady.cn】 家庭关系的自我提升【www.richdady.cn】 财运不佳咨询【www.richdady.cn】 孩子不爱读书的阅读计划如何制定?咨询【www.richdady.cn】 感情纠纷的心理调适【www.richdady.cn】 孩子厌学的前世因果【企鹅383550880】√转ihbwel 前世老婆的前世缘分威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 财运不佳的财富转运【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 发育倒退的前世因果咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 孩子压力大的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 婴灵对家庭的影响【企鹅383550880】√转ihbwel 存不住钱的原因分析威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 迟缓儿的前世因果咨询【σσЗ8З55О88О√转ihbwel 与女友前世的前世修行【σσЗ8З55О88О√转ihbwel 孩子厌学的环境影响咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 耳鸣的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 人际关系不好的环境影响咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕咨询【σσЗ8З55О88О√转ihbwel 前世缘份的故事如何改变命运?【企鹅383550880】√转ihbwel 有官司的自我保护【微:qq383550880 】√转ihbwel 互联网加数据库营销 天津市网站制作 公司 信息安全业务种类 石家庄专业模板网站制作价格 网站的方案 衡水网站制作 常德做网站 深圳市网站设计公司 建电子商务网站 网络信息安全部门 服务好的网站建设 常德做网站 酒泉网站建设 网站设计行业资讯 网站内容建设 合肥网站建设 推广型网站制作哪家好 营销形网站 大连公共信息网络安全监察局 建电子商务网站 信息安全的公司排名,-1 4C营销理论 酒泉网站建设 java保护信息安全 关于加强信息安全管理体系认证安全管理的通知,-1 温州手机网站制作公司电话 信息安全会议2015 网站的标准 建网站的程序免费 打造公司的网站 营销痛点 国内信息安全网站,-1信息安全风险是指认为或自然 网站的方案 一个好网站 internet的网络安全 4C营销理论 青岛的网站设计 启明星辰信息安全 石家庄专业模板网站制作价格 2016网络安全事件统计 物流公司网站制作模板 衡水企业做网站 温州网站设计 固原网站建设 合肥市做网站的公司有哪些 营销的对象 信息安全 c++ edm营销招聘 互联网内容营销公司 如何选择番禺网站建设 营销痛点 网络营销调研的优缺点 信息安全会议2015 免费建网站 酒泉网站建设 信息安全渗透测试服务,-1 大连公共信息网络安全监察局 昆明响应式网站 网站内容建设 石家庄专业模板网站制作价格 全响应网站制作 潍坊网站推广 常德做网站 网站转微信小程序开发 营销型网站策划 打造公司的网站 启明星辰信息安全 互联网内容营销公司 2015福建省网络安全宣传日 营销型网站策划 河南省网络安全办公室 武大 信息安全 天津市网站制作 公司 河南省网络安全办公室 禹城做网站 高端广告公司网站建设 网站制作哪家专业 企业网站优化 网站搭建吧 微信群营销推广方案 搜索引擎营销五个步骤是什么意思 网站维护与建设内容 深圳市 信息安全协会 建电子商务网站 提高个人信息安全意识 重庆互联网营销推广 vpn网络安全技术案例 整案营销 绵阳市公司网站建设 网络安全法 防病毒 营销包含哪些 国家网络安全小组 一个好网站 上海网站推广 深圳市网站设计公司 网站怎么创建 搜索引擎营销的注意点 全响应网站制作 工业信息安全培训 重庆建设网站 信息安全的人员安全,-1 搜索引擎营销的注意点 网站建设优秀网站建设 营销痛点 网站设计小技巧 品牌营销 网站怎么创建 信息网络安全办公室 网站设计计划书 禹城做网站 建网站的程序免费 重庆做网站哪家公司好 网站建设com 深圳品牌建网站 网站竞价 营销的对象 网络招生和营销 温州手机网站推广 信息安全业务种类 建网站的公司 高端广告公司网站建设 医院网络营销 网站设计行业资讯 软营销案例大学生信息安全考证 重庆做网站哪家公司好 基于大数据的网络安全 校园网站制作模板 网络安全培训方案 佛山网站建设 网络营销常用词 免费域名网站的 网络安全协议简介 营销型网络公司 高端网站建站公司 搜索引擎营销五个步骤是什么意思