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
信息通信网络安全2014 会议预告 信息安全多层次营销武汉市大型的网站制作公司提供网站建设搭建计算机信息安全是什么2017年最新网站设计风格什么是互联网营销迈克菲网络安全套装顺德网站建设原创唐轩只是一个普通的懵懂大学生,在鼓起勇气告白的这个夜晚,校花的突然来访改变了他平淡的人生。在惊悚与神秘的呼唤下,在爱与死的抉择下,他毅然选择了未知。王座高悬于上,陌生国度的大门向他缓缓开启。平凡的小人物走上不平凡的真理之路。然而王座的前面诡谲重重,当真相解开面纱,唐轩又该如何抉择? 是屠龙的少年终成恶龙,还是……颠覆整个世界。邪医回归,却被师父算计,做了上门女婿。 别人当上门女婿是受气,他是来当大爷的。 拳打无耻大舅哥,脚踢阴阳怪气小姨子。 恶少皆俯首,世家尽折腰,这是一代邪医纵横都市的故事。 我是一名精神科法医,最近我们小区命案频出。如果人生可以重来,你会如何度过一生 这句话如果是穿越之前有人对江武说,江武肯定滔滔不绝说上一天 可穿越之后,还有人这么对他说的话,江武会告诉他,随便过。 因为江武的人生可以重来无数次……莫非应和图灿分离后换上了“双重人格”,三年后图灿回来第一件事就是找他,没想到在小姨的精神病院找到。同时她也没想到,她的男友居然是她的同类,她好不容易(意外)治好了莫非,却发现莫非居然不是人,但这并不妨碍他们在一起,莫非:“把我弄成这个样子,可要好好负责。”图灿一边流着口水一边说:“好好好。”偏远小镇的孩子,却是最大家族的有力争夺者。天武举演,三国会议,继承者之战,前方的路迷雾重重,下一刻的战斗又会何时来临,江湖庙堂 谁主沉浮,边境能否镇守。末世+自然灾害+无系统+求生 气候突变,打破了世界原有的平静,冰川时代降临,幸存者挣扎求生。 面对未知的灾难和危险,一个个小人物组建到一块,共度危机,只为在这末世之下,走的更远笑傲江湖同人,纯属爱好。 其实已经写完了,一天一更。天道有缺,世间最强体质神魔霸体被天道所摒弃,十五年忍辱,终将迎来曙光! 大道枷锁自束己身桎梏又如何?我自当逆战苍穹,笑傲九重天,神挡杀神,佛挡弑佛,逍遥天地间! 一日破关,我为尊,一拳荡寰宇,一脚山河溃,一静万物生,一动诸天陨,一念可化阴阳轮回,一念可镇压永恒万古! 我为太古第一神王,天骄至尊皆是我帝路上尸山血海! 我当以一双铁拳,粉碎诸天万界,天道也不行!徐智墨意外穿越成了云中鹤,看着古墓的小龙女、慈航静斋的圣女、魔门圣女、燕子坞的王姑娘......都在为他争风吃醋。 自己只能在一旁无力的呐喊:“住手,住手,你们快住手,不要再打了啦!” 而此时,数道声音几乎同时从古墓外传了进来。 丘处机:全真教只有在云大侠手里才能真正的发扬光大。 洪七公:老叫花推举你成为丐帮下一任帮主。 郭靖:侠之大者,为国为民,这八字当之无愧! 东方不败:有你在统一江湖,永远只是一句笑话! 独孤求败:麻烦你搞清楚,我是求败,不是求虐!
银行信息安全演讲,-1 传媒公司营销策划方案 武汉市大型的网站制作公司计算机网络安全员 什么是互联网营销 武汉市大型的网站制作公司 微信营销的几种模式 网络营销咨询网站源码 下半年的信息安全会议 2016网络安全热点事件 做网站多钱 冤亲债主对生活的影响【www.richdady.cn】 前世老婆的前世记忆咨询【www.richdady.cn】 孩子厌学的案例分享【www.richdady.cn】 人际关系不好咨询【www.richdady.cn】 孩子压力大的环境影响【www.richdady.cn】 头脑混沌的案例分享咨询【www.richdady.cn】√转ihbwel 迟缓儿的治疗方法【σσЗ8З55О88О√转ihbwel 家庭关系的幸福指南有哪些?咨询【www.richdady.cn】√转ihbwel 大龄剩女的婚姻建议【企鹅383550880】√转ihbwel 长尾词【微:qq383550880 】√转ihbwel 孩子压力大的心理调适威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 阴间生活的前世修行【www.richdady.cn】√转ihbwel 官司的案例分享【www.richdady.cn】√转ihbwel 莫名其妙感伤的前世影响威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的教育策略威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 亲子关系的家庭氛围【www.richdady.cn】√转ihbwel 失业的咨询技巧【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 如何识别外灵干扰的症状【σσЗ8З55О88О√转ihbwel 灵性成长工作坊【σσЗ8З55О88О√转ihbwel 暗恋的原因分析咨询【企鹅383550880】√转ihbwel 什么是互联网营销 网站如何被百度收入 网站图片类型 浅淡电话营销的转化率 网站建设模板是什么 安全评估 网络安全法 建永久网站 邮件营销的图片 网站欣赏】 网络安全主要技术包括 信息安全等级保护二级要求 重庆 营销公司排名 东莞营销型网站建站 协会网站建设 2014年网络营销大事件 引擎营销 信息安全web安全,-1 网络整合营销及推广 淘宝网店网络营销策划 网络安全评估 珠海网站 建网站啦 信息安全铁人三项 cdn与网络安全 顺德网站建设原创 个人电子信息安全 经典网站设计 2016网络安全热点事件 上海做网站公司 重庆 营销公司排名 武汉市大型的网站制作公司计算机网络安全员 医院微营销 合肥网站制作需 网络信息安全的主要特征包括 网站制作 广州 怎样建立网站 南昌做网站 珠海高端网站制作公司 重庆 营销公司排名 工业信息安全通报预警房产中介网站建设 网络营销网站的功能 北京网站建设有限公司 国安网络安全法 网站建设总结 2013年国内外发生的网络安全事件统计 成都市网络安全协会重庆政府网站建设单位 重庆营销策划公司 物流网站建设 西乡建网站 深圳电商互联网营销 营销定位 计算机网络安全的信息 银行信息安全演讲,-1 信息安全资源 网站建设模板是什么 国外网站模板 网站都是每年续费的吗 建永久网站 网络安全培训哪家好 网站备案 做一个关于网络安全 浅淡电话营销的转化率 网站备案 银行信息安全演讲,-1 网站加黑链 信息安全保障 认证 武汉市大型的网站制作公司 信息安全等级保护关键技术国家工程实验室 网站如何被百度收入 多层次营销 网络安全新技术 cdn与网络安全 信息安全指导意见 信息安全等级保护关键技术国家工程实验室 网络营销方案简述 如何推广网站 东莞营销型网站建站 高档网站设计 微网站系统 上海做网站公司 网络安全主要技术包括 网站如何被百度收入 邮件营销的图片 seo网络营销师 优帮云 股票网站建设 青岛手机网站制作 深圳电商互联网营销 首都网络安全日报名 整合网络营销 优秀网站欣赏 青岛手机网站制作 信息安全考试报名 北京网站建设有限公司 建网站啦 信息安全考试报名 广告整合营销公司营销网络的方式 整合营销传播特点 想自己建个网站 怎么找网络营销 网站都是每年续费的吗 下半年的信息安全会议 安全评估 网络安全法 医院营销推广 重庆 营销公司排名 闵行网站建设 网站图片类型 政府网络安全解决方案 域名 备案号 网站的关系 珠海网站 网站加黑链 临沂网站维护公司 如何提升网站速度 网络整合营销及推广 信息安全等级保护二级要求 网络安全要求 计算机信息安全是什么 2014年网络营销大事件 个人电子信息安全 上海网络安全监察部门 计算机网络安全培训、 武汉市大型的网站制作公司计算机网络安全员 网络安全法的内容 2017网络安全博览会 2014年网络营销大事件 cdn与网络安全 聊城网站优化 传媒公司营销策划方案 长春给企业做网站的公司 网络安全培训哪家好 网络安全攻击的分类 协会网站建设 高档网站设计 网站定制与模板开发 重庆营销策划公司 大连建网站