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
合肥 信息安全购物网站如何推广单位网络安全宣传培训情况做网络营销要学什么无线网营销怎样学营销网络安全讨论信息安全会议几月召开信息安全 顶级会议绵阳做手机网站信息安全等保认证网络安全主要涉及哪三方面网络营销中的不足个人网站在那建设上海定制网站建设公司哪家好微信营销推送网站建设 长春外贸网站设计网络营销中的不足建手机网站一年费用重庆全网营销协会维护网站信息淘宝网店的营销方法有哪些内容网络营销带来的影响淄博做网站公司有哪些肇东市网站怎样学营销企业信息安全优化方案信息安全治理成熟度模型专业网络营销关注网络安全“我美吗?愿意亲我吗?” 诡异渗人的声音响起,裂口女站在路上,闪着幽幽红光的双眼,盯着面前的青年,似乎有些不理解青年为何如此..兴奋? “美,我愿意!” 穿着病号服的章衡,兴奋的对着裂口女深吻了下去,她震惊了。 虽然高杰米的年龄只有九岁,但是聪明伶俐。在经历案子的过程中,高杰米与犯人斗智斗勇,并且帮助四川警局抓住犯人,从此名扬四海。楚煜穿越至平行世界,成为了一个扑街带货主播,开局带货老谭酸菜。 楚煜:“各位老铁,看见了嘛,这酸菜腌制入味,香气扑鼻,比主播的女朋友还香啊!” 吧唧一口。一股臭袜子味直冲楚煜脑门,对他的大脑造成了250点暴击伤害! “呕!” 楚煜要吐了,心里吐槽:我踏马吃的是酸菜还是臭脚袜子?! 商家发来威胁信息:“吐尼玛!赶紧给劳资憋回去!否则你一毛钱都拿不到!” 楚煜硬着头皮开始扯淡:“这……这酸菜是真的香啊……” 香……香尼玛! 楚煜怒了。 “呸!这劣质酸菜,狗都不吃!” “黑心商家,劳资要举报你!” “我,楚煜,就是赔掉裤衩,也不会做你的黑心买卖!” 系统直呼:哇!这主播够老实,当我的宿主叭!乾坤生是非,引得猛虎啸,从此世上无太平。草根蔡頔,机缘巧合之下……   有的时候会感慨,要是活在梦里该多好。   美梦也好,噩梦也罢,当午夜来临的时候,每个人脑海里都开始了各自的盛宴。   梦中有千百世界,或留下深刻记忆,或也记不起。   开始做梦吧。一个普通的大学生在下车后,莫名穿越到异界大陆,以假面骑士之力纵横四海一个穷小子,机缘巧合下的一次重生,让他有了重新改变命运和环境的机会,面对家徒四壁负债累累的家庭,面对那个偏僻的小山沟,他一改过去的作风,踏实勤奋,刻苦拼搏,不但让自己和家人过上了受人尊敬的生活,而且,他还积极帮助乡亲,让一个外面闻所未闻的小山沟成为闻名遐迩的富裕之地,最终他的事业走向全国,冲向世界。 在2021年的某一天,地球上出现了三位神袛,他们自称贤者,并预言在不久的将来,地球将面临前所未有的灾难 与此同时,地球将有几百万人陆续成为异能者,互相厮杀,互相猜疑,踩着同类的尸体成为至强者 而在这一年,陆安被自己的青梅竹马,表白了这是一个天才辈出的武林盛世,也是一个动荡离乱的战争年代;有立身剑道的痴武之徒,也有慷慨赴死的侠义之士;有血染沙场马革裹尸的热血将士,也有儿女情长义气深重的性情男儿……尔虞我诈的朝廷宫闱,人心险恶的江湖武林,这个时代从来不缺慷慨悲歌的侠客!高考又一次失败,却意外进入了神秘学院。从此踏入了宿命早已注定的道途。 犯我中华者,虽远必诛! 有我在!尔等休想猖狂!
网络营销新媒体测试题 网络安全协议有哪些? 网站建设规划书 绵阳做手机网站 怎么加入网络营销公司 个人网站在那建设 网络安全学习路线 重庆互联网营销 广告公司 整合营销 国家网络安全周主题 大网站成本 郑州微网站建设网络安全等级保护版本 凡客建网站 湖南 信息安全公司排名 用于演示的信息安全产品,-1 网络信息安全工作小组 信息安全等级保 南京定制网站建设 信息安全等级保 广州制片公司网站 深圳企业做网站公司有哪些 信息安全治理成熟度模型 农业网站建设 网络安全学习路线 网络安全讨论 支付宝网络营销案例分析 植入式营销特点 怎么用html建网站 16达内网络营销盘 b北京网站建设 企业网络安全评估 保险网站建设 南宁信息安全测评中心 广告公司 整合营销 如何打造网站 物联网和网络安全 营销培训课程费用 玄武盾网络安全 南京定制网站建设 网站分享设计