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
大型网站的设计房山网络安全小镇网络和信息安全管理网络安全事件处理报告北邮 网络安全 期末考试网络安全法 研发安全信息网络安全合格证明cog信息安全太原市做网站长沙电子商务网站建设网站沙盒期 王卿穿越到远古时代,成为饕餮,才统治了这个世界,就被憨憨校花给召唤了,成了她的契约兽!   最离谱的是,连说话的权利都没有了。   “喵?”   “喵你个头啊!”   ......   我叫苏天天,被称为青阳学院的甜美校花!   这个世界,神秘复苏,到处都是妖魔鬼怪,异兽飞掠,厉鬼尖啸……   直到那天,能力觉醒,召唤了我的伴生契约兽。   然而我听到的第一句话就是:“喵?”   一只长得跟小黑狗一样的东西,开口居然是喵喵叫!   夭寿啦~~ 江湖上练剑的很多,可是成名的剑客就那么几个。就像码字的不少,成名的也是少之又少。别人写大侠,我就写那些不被人知的小人物吧。 平日偶有所感的小故事,权作练笔。江边夜里,爷爷将我捡来,取名江夜。 我本以为自己就是一个孤儿,却不曾想十八岁那年,身边开始怪事频频…… 我没有想过,江边飘来的红木棺材,改变了我的一生…… 我更没有想过,这辈子会和一口棺材纠缠不清……车辚辚,马萧萧,行人猎枪各在腰; 村镇灯火不再现,黔首飘曳迦南遥。地狱开局!穿越到异世界![奇幻魔法] 因为一场意外,幸福、快乐已经全都离我远去,现在的我,还能够追回吗? 【我的心底,满怀希望,同时也充斥着恐惧。】 是等待着命运的安排,选择逃避?还是无路可退? 也许,我已经找不回从前那种快乐的感觉了,因为我变了……变的陌生了,经历过这么多事,给我带来太多的仇恨与痛苦,或许我早已变成自己心里最痛恨的那种人吧…… 在这个黑暗的世界,连光明都是有罪!一个御兽的世界因为一次偶然的经历,郭逸尘获得了能够穿越到三国年代的古戒指,一夜之间,时空颠覆,郭逸尘穿越到了公元184年,黄巾起义的那一年....我,不想当全宇宙第一人,我不想独霸天下,唯我独尊! 因为我没有天赋,我没有外挂,我只有我自己,我只想安安静静的,当一个地球实力第一人! 本平平无奇,却又历经无数灾变与机缘,只因大道天选。力战仙魔,背后却仍是危机,他,能否护住这世界?天外有天,人外有人,当他立于灵武大陆最尖端时,才晓得,更大的世界在这片湛蓝天空之外…… 未来资源短缺,战争频发,外星文明入侵,地心生物发难,人类一败涂地,只能龟缩在边陲小城。我们历尽千难万险研究出平行时空更迭装置来到现在的新宇宙,却发现那个宇宙的怪物正在入侵现在这个宇宙! 少年,不要逃避,能救这个宇宙的只有你了!你将回到那个豪杰辈出,群雄并起的地方,血与火在等待着你,钢刀会武装你的身体,巫术会锤炼你的心智,你必定能重铸人类荣光! “真的吗?燃起来了!但是……我拒绝。”
网络安全通报实行 上海信息安全中心地址 山东 信息安全 检查 微信营销成功案例 北京手机版网站制作 中国信息安全等级 网络安全情况通报 易奇秀网站 网络安全外包公司 邮件营销中国 暗恋的案例分享【www.richdady.cn】 脑部不清晰咨询【www.richdady.cn】 心慌胸闷头晕的解决方法【www.richdady.cn】 暗恋的情感表达咨询【www.richdady.cn】 家庭关系的相处之道咨询【www.richdady.cn】 前世缘份的常见类型威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 心特别累的情感释放威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 意外的前世案例咨询【微:qq383550880 】√转ihbwel 公司破产的前世因果【微:qq383550880 】√转ihbwel 去世的母亲的前世案例咨询【微:qq383550880 】√转ihbwel 投资项目的收益分析咨询【微:qq383550880 】√转ihbwel 忧郁症的案例分享【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的咨询技巧【σσЗ8З55О88О√转ihbwel 外灵干扰的真实案例分析【www.richdady.cn】√转ihbwel 什么原因意外的前世因果【www.richdady.cn】√转ihbwel 孩子学习不好的自我提升咨询【www.richdady.cn】√转ihbwel 学习成绩差的解决方法咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 感情纠纷威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 公司破产的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 心慌胸闷头晕的咨询技巧【σσЗ8З55О88О√转ihbwel 泊头网站建设 全球网络安全公司排名 网站建设的售后 有线电视网络安全 网站面包屑导航设计即位置导航 网络信息安全技术措施 需要认证的网络安全 需要认证的网络安全 信息安全宣传资料,-1 深圳营销 网站开发 价格网络营销相关资料 网络渠道营销策略 在太原营销 中国信息安全测评师 网络安全通报实行 信息安全评测费用,-1 网络安全推荐 北京信息安全企业排名 网络安全法 研发安全 国家信息安全保护 陌陌社交营销 昆明网站排名优化费用网站设计官网 网站信息安全等级测评保护 信息安全资质包括哪些内容 微观环境营销中介 网络信息安全主动防御 网络安全日郭启全致辞 响应式网站栅格 关于淘宝营销 重庆网站推广营销 信息安全管理三个要素 珠海网站营销 营销策划天培营销 高端网站定制费用是多少 cio信息安全高峰论坛 网站怎做 个人电脑网络安全 陌陌社交营销 认识网络营销调查的基本方法 北京大学网络与信息安全实验室 营销导向企业网站策划 常州集团网站建设 信息安全等保三级标准 网站设计的优点和缺点 全球网络安全公司排名 军用信息安全产品认证证书等级 网站设计步骤 个人电脑网络安全 e_mail营销方法 常州营销外包 网络媒体新闻营销 服务营销4p理论 换网站了吗 换网站了吗 公信部信息安全 信息安全管理体系实施案例及文件集 网站面包屑导航设计即位置导航 高校网站首页设计 太原网站制作 信息安全评测公司 微信营销的目的 网络信息安全技术措施 淄博网站推广广东网络安全执法 云南网站推广 电商网站建设 什么是营销型的网站推广 北京手机版网站制作 上海网站设计 建国内外网站有什么区别 需要认证的网络安全 信息安全第五 空间 网站视觉 网站建设学校网络安全实验室 预算 信息安全宣传资料,-1 网站推广专家 营销网址 信息网络安全合格证明 深圳营销 国家信息安全保护 网络安全外包公司 网络安全日郭启全致辞 聊城网站建设招聘 全网营销方案及布局 大学生信息安全 信息安全研究室哪个最好 个人信息安全相关条例 信息安全资质包括哪些内容 大型网站的设计房山网络安全小镇 上海营销型网站制作 在太原营销 网络安全通报实行 餐饮 网络营销工具 信息网络安全公安部 中国信息安全测评师 珠海做网站 西安专业网站建设服务 网站信息安全等级测评保护 网络安全通报实行 概括 病毒营销特点 互联网营销领域的公司 信息安全评测公司 信息安全评测费用,-1 潍坊网站建设服务商 网站备案信息注销原因? 网站和后台 手机营销活动策划方案范文 网络安全推荐 汽车营销案例 北京信息安全企业排名 北京做信息安全 网站首页设计 国家网络安全信息小组 上海信息安全中心地址 网络安全法 研发安全 中国信息安全等级 检查网络安全 长沙网络营销学习网 国家信息安全保护 上海信息安全???生招聘 洛阳 网站建设 关于淘宝营销 陌陌社交营销 网络营销工程师 网营销策划方案电商 网络信息安全主动防御 昆明网站排名优化费用网站设计官网 常州集团网站建设 营销网址 北京信息安全企业排名 优优营销软件 个人信息安全相关条例 网络安全外包公司 上海信息安全中心地址 黑龙江省网络安全攻防 网络媒体新闻营销 高端网站定制费用是多少 长沙网络营销学习网 电商短信营销 ctf 网络安全 大型网站的设计房山网络安全小镇 国家网络安全信息小组 增城做网站 太原网站制作 餐饮 网络营销工具 微信营销成功案例 ctf 网络安全 2014信息安全大赛 cog信息安全 信息安全管理体系实施案例及文件集 整体营销名词解释 北京手机版网站制作 互联网营销领域的公司 网络营销推广职业规划 营销策划天培营销 成都的信息安全公司排名 上海信息安全???生招聘 网络和信息安全管理 网站建设学校网络安全实验室 预算 太原市做网站 易奇秀网站 远程教育信息安全技术答案 信息安全顶级学术会议 国家信息安全保护 国家网络安全信息小组 网站建设与制作价格 企业网站建设公司郑州 网络分享性网站 网站建设设计 电商短信营销 换网站了吗 网络信息安全技术措施 微信网页版信息安全吗 好模板网站 高校网站首页设计 做个网站要多少钱 网营销策划方案电商 重庆网站推广营销 网络信息安全技术措施 军用信息安全产品认证证书等级 cio信息安全高峰论坛 网络安全技术图片 网络安全技术图片 概括 病毒营销特点 太原seo网站建设 als冰桶挑战算那种网络营销 网站设计的优点和缺点 深圳微信营销神器 西安h5网站建设 珠海网站营销 为什么有些网站搭建的是php其所有网页均已.htm命名 网络安全推荐 长沙电子商务网站建设 上海网站设计 深圳营销 微信网络营销案例 军用信息安全产品认证证书等级 信息安全等保三级标准 聊城网站建设招聘 佛山做网站格 信息安全动画 网站备案信息注销原因? 个人信息安全相关条例 上海信息安全???生招聘 网络安全环境检测 网站面包屑导航设计即位置导航 个人电脑网络安全 中国信息安全测评中心属于 太原市做网站 微信营销的目的 松江营销型网站建设 淄博网站建设相关文章 做一个简单网站 电商网站建设 电商网站建设 为什么有些网站搭建的是php其所有网页均已.htm命名 网络渠道营销策略 建国内外网站有什么区别 信息安全评测费用,-1 网络信息安全犯罪案例,-1 信息安全的新闻 网站建设学校网络安全实验室 预算 手机营销活动策划方案范文 餐饮 网络营销工具 网络安全知识ppt 互联网营销领域的公司 北京做信息安全 想要做一个网站 淄博网站建设相关文章 网络安全公 网络安全设置方案 常州营销外包 服务营销4p理论 网络安全事件处理报告 长沙网络营销学习网 沪江网络营销 信息安全管理体系实施案例及文件集 网络安全外包公司 网站模板设计 赣州网站建设 网络安全推荐 网站怎做 沪江网络营销 网络安全情况通报 云南网站推广 网络安全环境检测 网站信息安全等级测评保护 手机营销活动策划方案范文 上海网站设计 信息安全评测公司 信息安全等级保护管理办法(试行),-1 单位网络安全保护状况 信息安全资质包括哪些内容 网站和后台 北京手机版网站制作 常州集团网站建设 营销网址 北京信息安全企业排名 优优营销软件 个人信息安全相关条例 网络安全外包公司 上海信息安全中心地址 黑龙江省网络安全攻防 网络媒体新闻营销 高端网站定制费用是多少 长沙网络营销学习网 电商短信营销 ctf 网络安全 大型网站的设计房山网络安全小镇 国家网络安全信息小组 增城做网站 太原网站制作 餐饮 网络营销工具 微信营销成功案例 ctf 网络安全 2014信息安全大赛 cog信息安全 信息安全管理体系实施案例及文件集 整体营销名词解释 北京手机版网站制作 互联网营销领域的公司 网络营销推广职业规划 营销策划天培营销 成都的信息安全公司排名 上海信息安全???生招聘 网络和信息安全管理 网站建设学校网络安全实验室 预算 太原市做网站 易奇秀网站 远程教育信息安全技术答案 信息安全顶级学术会议 国家信息安全保护 国家网络安全信息小组 网站建设与制作价格 企业网站建设公司郑州 网络分享性网站 网站建设设计 电商短信营销 换网站了吗 网络信息安全技术措施 洛阳 网站建设 陌陌社交营销 信息安全的新闻 网络安全通报实行 响应式网站栅格 全球网络安全公司排名 易奇秀网站 珠海做网站 网络营销中的产品策略 什么是营销型的网站推广 什么是营销型的网站推广 检查网络安全 北京信息安全企业排名 响应式网站栅格 需要认证的网络安全 潍坊网站建设服务商 网络安全日郭启全致辞 泊头网站建设 信息安全宣传资料,-1 信息安全活动方案 网站报价单 北京做信息安全 常州集团网站建设 网站首页设计 好模板网站 网站建设的售后 新疆网站制作 中国信息安全等级 网络信息安全等级保护 换网站了吗 太原seo网站建设 网站备案信息注销原因? 网络安全专家 网络营销策略翻译 在太原营销 网络营销工程师 网站推广专家 做个网站要多少钱 中国信息安全测评师 武汉网站建设企业 建网站工具 银川怎么做网站 银川怎么做网站 信息安全宣传资料,-1 远程教育信息安全技术答案 有线电视网络安全 网站与微信 网站设计步骤 公信部信息安全 营销导向企业网站策划 邮件营销中国