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
湖南长沙网站建小红书网络营销推广提高个人信息安全意识长沙专业做网站长春制作门户网站的公司网站销售如何攻破网络安全审计监控系统郑州网站建设最独特自己怎样制作公司网站近年来网络安全大事件上天给了李锋一次重生的机会, 意外寻得神器翻天印, 丹药随手便可炼制;神兽轻易收服;美女投怀送抱。 这一世,李锋发誓一定要诸天万界称雄……单人无女主爽文茫茫人海中独自生存资深外科医生林陨,莫名穿越到九州大陆的玄月宗,成为了最被人看不起的一名上门赘婿,同时也拥有了一位美若天仙的宗主妻子。 幸得药神系统,无限速成神品丹药,修得上古肉身成圣之法。从此扭转悲惨命运,脱胎换骨! 阴谋毒害、冷眼嘲笑……一切都将成为过去。 纵横万古帝之道,我自剑来谁言轻? 哪怕是当赘婿,他也要当一名最强最狠的赘婿!九州神王李长青,被兄弟偷袭陨落,却意外重生归来。 尘封万年的洪荒大妖,将成为他的助力, 万界之中,修最强之术,炼顶尖灵药,布绝妙大阵…… “前世我能登临巅峰,这一世我也一样可以,诸天万界,终有一天,我会卷土重来!” 滚滚六道两茫茫 不知何处是家乡 身分血尽魂未灭 魔神归来无良绝 天地未分之初称为鸿蒙虚无(或混沌),鸿蒙之气便是唯一。不知多久孕育三灵,其一为女娲、其一为鸿钧、其一为问生。再不知多久孕育出一山名曰不周,又不知多久鸿蒙之中天地初成、上圆下方、飘忽不定。三灵以不周为基托天地于其上,以四维之力蕴养不周。此后三灵便居于初成天地之中。 许久以后天地之中孕育一灵曰盘古,盘古托天踏地天地初分。至此后天地孕育万灵,女娲以土造人为人族之始祖,后古神大战引四维不稳不周受损上天崩裂,女娲又补天救天地间生灵。 又许久人族出现纷争战乱不断,使四维不稳加重不周无养天地晃动,鸿钧教化人族、女娲安抚万灵,问生以本命神元修复四维使不周永固天地永存。道在何方,道在天涯。御灵者,上古巨兽,兽人,人兽,异能者,素国武者,传说中的龙族,随着世界联赛的开始,背后的阴谋拉开了序幕……五年前,他是豪门公子,遭亲人陷害,被打断双腿,扔到桥洞要饭。 五年后,他是护国战王,控疆万里,位居人臣,一人之下万人之上。 今天他回来了,牵起她的手,要给她世上最尊贵的生活。。。。。。 南京沦陷后,日寇对30万中国军民展开灭绝人寰的大屠杀。渔家子弟罗小虎临危受命,保护国民党高官的女儿林菲儿撤往后方。他们在猎户兄妹的帮助下,屡次挫败日寇的尾追堵截;在共产党人的配合下,不仅阻止了日特对我战区最高长官的刺杀行动,还歼灭了混入我后方的日军特工队。 这些英雄儿女面对强大的日军特工部队,毫不退缩,与之斗智斗勇,展开了惊心动魄的暗战……前世顶级杀手转生异界骷髅?! 诡异书页 ,神秘纹路,脑中突然出现的那是什么... 隐秘如一团团迷雾笼罩。 前所未有的异界大陆,阿尔伯特睁开了眼睛。 ”我的士兵,帮助你们的王铲除掉来犯的蝼蚁!” “你管眼前这个叫蝼蚁?!” 阿尔伯特的异界冒险,开始了!
江津网站建设 潜艇的信息安全 淮安网站建设 朔州网站建设 广东政府信息安全问题 重庆专业网站设计服务 新营销策划 网络安全实验室上传关 临沂做网站建设的公司 微商城网站建设平台 构建和谐亲子关系的方法【www.richdady.cn】 亲子关系的沟通技巧【www.richdady.cn】 去世的母亲的前世缘分【www.richdady.cn】 婴灵的感应现象【www.richdady.cn】 去世的母亲的去向解析咨询【www.richdady.cn】 什么是婴灵?【微:qq383550880 】√转ihbwel 迟缓儿的自我提升咨询【www.richdady.cn】√转ihbwel 自闭症的环境影响【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 邪灵的驱除仪式咨询【www.richdady.cn】√转ihbwel 财运不佳的财运提升【σσЗ8З55О88О√转ihbwel 前世缘份的重逢故事【www.richdady.cn】√转ihbwel 感情纠纷的情感疏导技巧有哪些?咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 与男友前世的记忆解析咨询【σσЗ8З55О88О√转ihbwel 前世老公的前世故事咨询【σσЗ8З55О88О√转ihbwel 意外事故的主要原因分析咨询【www.richdady.cn】√转ihbwel 感情纠纷【www.richdady.cn】√转ihbwel 前世缘份如何影响人际关系?咨询【www.richdady.cn】√转ihbwel 前世今生的缘分解读咨询【www.richdady.cn】√转ihbwel 学习成绩差的环境影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 莫名其妙感伤的前世记忆【www.richdady.cn】√转ihbwel 单位 网络安全 网络营销热点事件2014 网站单页 搜索型网站 产品营销策划推广方案 如何攻破网络安全审计监控系统 小红书网络营销推广 免版权费自建网站 代防火墙与网络安全中的防火墙有何联系和区别 利用微博营销 网络营销学 企业手机网站建设机构 单位 网络安全 网络安全攻防环境 java保护信息安全 网络安全法概述 江苏省信息安全中心 潜艇的信息安全 顺德网站建设信息 公安部信息安全监察 深圳企业营销培训机构 石家庄网站制作 ubuntu网络安全 网络信息安全服务包括,-1 网络与信息安全教程 安徽网站定制 网络安全 检测实验室 珠海门户网站建设 网站的营销方法有哪些 国税网络安全宣传周 网络安全软件公司 佛山网站设计特色 微活动营销案例 网络广告营销模式案例 潜艇的信息安全 网站建设学费多少钱 上海网站设计开 网络营销热点事件2014 网络与信息安全教程 安徽省公安厅网络安全兰州网站建设 湖南网站优化 网络信息安全服务包括,-1 互联网营销网站有哪些 南昌建网站 吉首网站建设 广东政府信息安全问题 郑州的数据营销公司怎么样 网络设置的网站 公安部信息安全监察 网络安全焦点 公安局网络安全大队 网站的营销方法有哪些 产品营销策划推广方案 信息安全防护方案 石家庄网站制作 深圳企业营销培训机构 公安信息安全考试,-1 网站行销 中国网络安全标准 单位 网络安全 石家庄网站制作公司互联网信息安全解决 2016网络安全政策 信息安全评估机构 淮安网站建设 搜索型网站 大连做网站公司 线上线下结合营销策略 信息安全系统设计,-1 超链接营销 建网站赚钱 网站销售 小红书网络营销推广 石油石化信息安全 网站销售 利用微博营销 信息安全防护方案 o2o网站建设代理商 nba网站建设 如何攻破网络安全审计监控系统 小红书营销推广 java保护信息安全 网络广告营销模式案例 朔州网站建设 网络安全焦点 企业手机网站建设机构 网站销售 信息安全等级保护安全要求的基本框架 企业网站快速建立aspcms2.2新手完全自学视频教程 免费下载 信息网络安全建设方案 信息安全等级保护安全要求的基本框架 顺德网站建设信息 石家庄网站制作 网络营销专业都学什么 春晚的网络营销方案 免版权费自建网站 新闻产业中病毒式营销 gb 信息安全,-1 吉首网站建设 近年来网络安全大事件 大连做网站公司 网络安全如何创业 潜艇的信息安全 2016信息安全会议 石油石化信息安全 免费设计网站 安徽省公安厅网络安全兰州网站建设 网络营销的网站分类 在线网络营销 大学生信息安全考证 虹口公安 网络安全 为什么研究网络营销 网络安全协调局 胡啸 网络安全管控系统 网络设置的网站 搜索型网站 性营销 nba网站建设 网络推广营销 信息安全培训机构课程 信息安全标委会 南昌建网站 景区类网站 新闻产业中病毒式营销 珠海微信营销 深圳市 信息安全协会 网络安全法概述 企业的营销案例分析ppt o2o网站建设代理商 建网站赚钱 网络安全检测的步骤 为什么研究网络营销 信息安全系统设计,-1 网站的营销方法有哪些 政府网站建设 搜索型网站