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
首都网络安全日培新信息安全三级等保方案网络安全大会2017ppt深圳网站维护公司网络营销能力秀的总结上海网络信息安全宣传,-1网站设计开发的难点网络专业的网站建设网络安全与防护实验报告网站前端【元宇宙 爽文 快节奏 老作者 稳定更新】 精灵世界即将以游戏的形式降临世界,震惊全球! 而在游戏上线的一周前,顶级玩家云晓重生归来,通过系统获得提前登录游戏的资格! 前世的遗憾、遭遇的背叛...他都将在这一世全部改写! 秦柯扫了算命先生手绘的二维码,下载了一款神奇的手机app,这款神奇app名曰“仙魔交易商城”,商城内买卖各种奇珍异宝,这些东西以前的秦柯莫说见过,就连想都不敢想。  从此,籍籍无名的平凡小青年,开始走上人生巅峰…后金铁骑灭宋,历史拐弯进入刘氏文朝。文昭帝五十二年,内忧外患,左相专权当道,宗室萧墙。腐朽将倾,灭国亡种露端倪。 懦弱书呆子杨继业在荆蛮楚地意外转性,文武并行,带领蛮族军一路前行。破山贼、剿倭寇、东控海贸、北撼蒙匈;内权肃奸、强兵兴武,皇权进村,国富民安,成就权相伟业,华夏一族登临世界之巅。 架空历史+商战+官场+战争+崛起公元2500年,随着科学家对宇宙无休止的探索,导致宇宙深处的高级生物察觉到地球的存在,不知何种原因,外星生物对地球进行了大举进攻,导致人类死亡惨重,大战结束后,地球星核爆发出了一种神奇的气体,它能让地球物种体质变强,科学家给这种气体取名为天炁,但不过人类对天炁吸收能力十分有限,科学家因此研发了一种名叫炁芯的纳米芯片,它能让人类吸收天炁的速度加快,并且还能靠此芯片延长人类寿命,但人类科学家并没有为此感到满足,他们再次结合外星物种创造了一种能够拥有外星物种特殊能力的战斗纳米芯片,人类靠着此类战斗芯片,终于战胜外星生物,人类得以苟延残喘,但外星生物并没有停止对人类的进攻,因此地球取消了国家制度,由炁芯战士带头创建一个名为维度联邦的组织来抵御外星生物。2035年地球被黑雾笼罩,进化因子席卷全球,异兽觉醒丧尸横行,穿越者重生者系统携带者纷纷出现,且看陆羽如何在众多挂哥面前逆天崛起!一个强盛的王朝,在烈焰中轰然倒塌。覆巢之下,人们挣扎在未尽的余灰中。许多人扛起了复国的渴望。可是,汹汹而来的鬼蜮伎俩,却将乱局搅动得愈加波诡云谲。好在,大智大勇者的神机妙算,最终冲破了鬼魅的阴霾。然而,一桩被掩藏了数十年的王朝秘事,却始终裹挟在迷雾之中,如今,它更是幻化成一张正缓缓地张开的血盆大口,誓要将这破碎的王朝一口吞下。九州大陆,华夏历史上出现的巨大王朝,粉墨登场。 大秦嬴政,大汉刘邦,大唐李世民,大明朱元璋诸雄争霸! 嬴子夜穿越成嬴政第九子,躺平十年,刚踏入陆地神仙,就被天道金榜曝光! “武道资质榜第二:武当大师兄王也!” “武道资质榜第一:大秦九皇子嬴子夜!” 武当老祖宗:“什么?第一居然是祖龙之子!” 少林扫地僧:“这是个什么怪物?” 李世民:“此子,不能留!” 朱元璋:“派锦衣卫将嬴子夜除了!” 嬴政:“快让夜儿过来,寡人得好好问问他!” 嬴子夜:…… “我是真想低调,奈何实力不允许啊!” 菩萨低眉,所以慈悲六道! 撒旦低头,所以血流成河! 以撒旦之名,专职杀戮,他要当最强的那个男人! 最燃的都市,且看一个男人如何成就霸业,成为傲立巅峰的一代传奇!   【七少出品,铁血霸气】 撒旦军团群:198247503 香港回归25周年纪念,经典港剧大时代反派丁孝蟹同人文。家庭,事业,爱情,一个男孩成长为男人,一只小螃蟹一步步蜕变为大佬孝。天工谱曲,星罗满布,看遍无尽苍穹最后只觉得,那广茂星海不过是漫天的尘埃,只有生命才是荒凉宇宙的真谛。
工控网络安全学院 网站功能表 网络安全服务包括哪些内容 网站建设套餐 京东 网络安全 岳阳网站优化 网络安全与黑客攻防培训系列教程 参与网络安全国家标准 网站预算 廊坊网站建设 与男友前世的咨询技巧【www.richdady.cn】 事业不顺的改运方法咨询【www.richdady.cn】 莫名其妙感伤的前世影响【www.richdady.cn】 孩子学习不好的咨询技巧【www.richdady.cn】 感情纠纷的情感和解【www.richdady.cn】 与老公前世的故事分析【企鹅383550880】√转ihbwel 老公家暴的前世因果【σσЗ8З55О88О√转ihbwel 迟缓儿的自我提升【微:qq383550880 】√转ihbwel 性压抑的前世记忆【企鹅383550880】√转ihbwel 前世老公的前世因果咨询【σσЗ8З55О88О√转ihbwel 前世今生的咨询方式威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵干扰的原因分析咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 儿子不读书的环境影响【微:qq383550880 】√转ihbwel 前世缘份如何影响人际关系?【www.richdady.cn】√转ihbwel 老公家暴的自我保护【σσЗ8З55О88О√转ihbwel 前世老婆的前世记忆咨询【σσЗ8З55О88О√转ihbwel 升迁障碍的前世因果咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 感情纠纷的情感重建【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的轮回传说【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的矛盾化解方法有哪些?咨询【企鹅383550880】√转ihbwel 全国网络安全大检查 国内网络安全事例 南宁会员网站制作 网站建设套餐 直复营销最初形态是: 网络安全与黑客攻防培训系列教程 网络安全信息分析 常州网站设计 网站信息安全管理 南昌建网站单位 信息安全等级保护关键技术国家工程实验室 网络安全要求 网络安全条例 翻墙 提供常州网站建设 加强网络安全技术培训 岳阳网站优化 国外网络营销 linux 网络安全防护 上国外网站的dns 电商的内容营销案例 广西信息安全测评中心 福州公司网站建设 网络品牌营销 中国国家信息安全漏洞库支撑单位 2015年工业控制网络安全态势报告 网站国际化 网络安全大会2017ppt 营销运营方 济南网站设计建设公司 网络安全安全专业 信息安全等级保护的测评工作中应如何规范行为规避风险 做网站设计所遇到的问题 免费学校网站建设 传媒公司营销策划方案 淘营销报名博客营销的弊端 广西信息安全 2017网络安全日报名 直复营销最初形态是: 大连营销策划公司电话 上海信息安全测评中心 首都网络安全论坛 绿盟 提供常州网站建设 应该双网站 首都网络安全日培新 网站取消备案 信息安全考试报名 泉州网站制作 网络安全主要技术包括 信息安全服务资质查询 许可e mail营销案例 哪家网站设计好 廊坊网站建设 网站建设套餐 国家信息安全等级第一级保护制度,-1 网站预算 网络安全服务包括哪些内容 直复营销最初形态是: 网络安全商业模式 app信息安全 潜江网站建设 网络安全与黑客攻防培训系列教程 广州网络安全培训课程 潜江网站建设 网站建设套餐 网络安全信息分析 微山做网站 免费学校网站建设 网络营销做什么 常州网站设计 网络安全条例 翻墙 佛山企业网站建设平台 网站描文本 网站信息安全管理 泉州网站制作 2015年工业控制网络安全态势报告 济南网站设计建设公司 南昌建网站单位 做专业网站 大连网站制作.net 网站设计的公司 信息安全等级保护关键技术国家工程实验室 创建网站的优势 网络安全审计设备 迅腾科技-专注网络安全 网络安全要求 网络营销能力秀的总结 1对1营销案例小米公司网络营销分析 app信息安全 网络安全条例 翻墙 昆明网站设计 即时通讯营销的缺点 海外营销软件手机版网站制作 提供常州网站建设 信息安全三级等保方案 重庆 营销公司排名 网络安全体系 具体设备 加强网络安全技术培训 网络安全要求 网红网站建设官网 重庆知名网络营销公司排名 岳阳网站优化 广西信息安全测评中心 2015年3月份信息安全 网络安全认证协议 最专业的做网站公司 网络安全体系 具体设备 全国网络安全大检查 移动信息安全课件 信息安全实验室品牌 哪家网站设计好 移动信息安全课件 网站建设公司 中企动力公司 网站建设目标 工控网络安全学院 网站设计的公司 网络安全应急服务支撑单位 即时通讯营销的缺点 推广型网站 关于建网站新闻 2014年网络营销大事件 公安信息网络安全工作 成都网站制作 南京设计网站 网络安全峰会2015.12月 网红网站建设官网 珠海营销型网站 单位网络安全管理协 相宜本草的口碑营销 信息安全铁人三项 即时通讯营销的缺点 网站建设需要哪些素材 网络安全的新闻 狮山建网站 网络专业的网站建设 企业信息安全管理案例