1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

The default grid system provided as part of Bootstrap is a 940px-wide, 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 we defined as part of our 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

With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

Example

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>

Fluid columns

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Percents, not pixels

The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

Fluid rows

Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

Markup

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Fluid nesting

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
Variable Default value Description
@gridColumns 12 Number of columns
@gridColumnWidth 60px Width of each column
@gridGutterWidth 20px Negative space between columns
@siteWidth Computed sum of all columns and gutters Counts number of columns and gutters to set width of the .container-fixed() mixin

Variables in LESS

Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.

How to customize

Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.

Staying responsive

Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

<body>
  <div class="container">
    ...
  </div>
</body>

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Responsive devices

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

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

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }

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

Test case

Resize your browser or load on different devices to test the above clases.

Visible on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop
网络安全风险提示信息安全管理体系内审国家信息安全测评认证中心网站制作样板网络安全身份认证技术网站有哪几种网站酷站网络安全小工具湛江做网站建站营销在八百年前,明至世界发生了一场天昏地暗的战斗,以【炎祖】为首的攻击八人的【宗祖】向【地祖】发动了歼灭战,在那次战斗后,双方签订契约,互不侵扰,但随着时间的流转,这份契约也石沉大海,新一轮的故事也即将发生一介凡人妄图与天争个高低,实在是可笑至极,待看这天如何折磨这一介凡人。 我欲红颜斗万法,奈何苍天逆枉情。 【逆苍玄】有声读物已经开始更新,漫画版也在制作当中,敬请期待长篇寄情小说系列 李天命做梦都要笑醒了。他家的宠物,竟然都是传说中的太古混沌巨兽! 他的家鸡,是以太阳为食的‘永恒炼狱凤凰’。 他的黑猫,是以雷霆炼化万界的‘太初混沌雷魔’。 连他家的小强,都是拥有万亿不死分身的‘万界永生兽’…… 从此,他驾驭十头太古混沌巨兽,化身万古第一混沌神灵,周游诸天万界,镇守无尽神域。万物魔灵,诸天邪魔,连爬带滚,哀呼颤抖! 少年为了保护小师妹从深山走出,左手悬壶济世,右手飞针杀人,赚钱救人两不误。 不管权势滔天,还是富可敌国,在我面前都须低头。 尔等记住,若我避世,群雄并立,若我入世,天下无双! 心海飘,心海摇,谁人知晓天地高。独撑孤舟荡青黄,见姜尚,慰寂寥,不知清梦何人扰。翩翩离梦虚若实,再回首,却是虚无缥缈,虚无缥缈……原本吴向东作为医院高新人才引进计划的成员而备受瞩目,却因为一场突如其来的医疗事故坠入深渊,不但被医院打上“推诿病号”的烙印,更是在同窗的推波助澜下被医院发配到乡下干起了赤脚医生,耽误了前程。 虽然多年后他凭借精湛的技术在医疗行业中闯出属于自己的一片天地,却始终因为那件事被人诟病,无法将自己的健康理念推向全国,而后在某次醉酒中他发现自己重新回到1999年的那场医疗事故的当晚。 于是那个男人回来了,他凭借前世经验,在那个单纯以治疗疾病为目标的年代,始终坚持以病人本身为治疗原则,在他的带领下,医疗行业发生翻天覆地的变化,而他和自己的团队也在一次次医疗事件中,逐步登上世界医学的舞台并伫立在世界之巅。茫茫天地,亘古永存,所有生灵,不断轮回,无限延续。 忽有一日,天地变,三界崩,阴阳转,轮回断,从此世间再无轮回,直至天地毁灭.....恶灵苏醒,乱世降临,华国岌岌可危! 普通人命如草芥,随处可见尸横遍野。 叶辰,从异世穿越而来,激活杀戮系统。 恶灵、异变体,皆为系统升级的燃料。 肉身无限增强,武学无限进化。 【成功击杀变异三角哥,获得50点力量!】 【成功击杀变异跳尸,获得40点体质!】 【神魂点数-10,霸体血统升级,狂暴时间提升50%、狂暴期间力量提升200%、敏捷提升200%、体质提升300%】 【技能点数-1,金钟罩熟练度提升为LV100,进化为龙吟金钟罩LV1!】或凶杀,或自杀过的宅子,皆称之为凶宅。 市面上凡是地段上佳却又价格出奇低廉的宅子,皆出现过各种重大事故。 房主人为了打消购买者的疑虑,便会花重金邀请业内顶尖的试睡师破解凶宅传闻,同时化解凶宅内的凶邪离奇之事。 穷屌丝林飞误入试睡师行当,揭开一桩桩凶宅秘闻!
网络安全协议理论与... 贵阳专业性网站制作 网络公关营销公司 网络安全攻击的方法 网站制作模板 企业网站制作 互联网营销的主要优势 富阳做网站 网络安全知识测试 富阳做网站 投资项目的自我提升【www.richdady.cn】 事业不顺的职业规划咨询【www.richdady.cn】 前世缘份如何影响今生?【www.richdady.cn】 投资项目的前世记忆咨询【www.richdady.cn】 耳鸣对睡眠的影响【www.richdady.cn】 大龄剩女的婚恋困惑威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 失业的案例分享咨询【σσЗ8З55О88О√转ihbwel 感情纠纷的情感重建咨询【www.richdady.cn】√转ihbwel 如何改善人际关系咨询【σσЗ8З55О88О√转ihbwel 大龄剩女的婚恋建议【σσЗ8З55О88О√转ihbwel 发育倒退对孩子心理的影响咨询【企鹅383550880】√转ihbwel 脑部不清晰的自我提升咨询【微:qq383550880 】√转ihbwel 特殊学校的咨询技巧咨询【微:qq383550880 】√转ihbwel 升迁障碍的自我提升咨询【企鹅383550880】√转ihbwel 冤亲债主的干扰案例咨询【企鹅383550880】√转ihbwel 大龄剩女的婚姻选择有哪些?【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的解决之道【企鹅383550880】√转ihbwel 精神不振的咨询技巧咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 头脑混沌的原因分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 前世今生的缘分解读咨询【微:qq383550880 】√转ihbwel 富阳做网站 杭州电子科技大学信息安全 网络安全攻防linux 南宁网站建设教学 什么是020营销模式 网络安全身份认证技术 酷炫给公司网站欣赏 网站制作模板 我国信息安全论文 网站挂黑链 网络营销优化顾问 信息安全杂志有哪些内容,-1 网络安全编程的特点 互联网信息安全办公室 赣州网站推广 莱西做网站 网络安全中CIDF英文缩写 seo网站系统 深圳 企业网站建设 网络安全中CIDF英文缩写 网站挂黑链 美橙网站维护 网站建设策略 网络安全厂家分类 信息安全公司资质证书,-1 长安手机网站建设 什么是020营销模式 网站有哪几种 信息安全入门网络安全监督管理电话 郑州微网站建设 网络安全预防 优秀企业网站 厦门企业网站制作 信息安全专业领军人物 网站设计公司 无锡 怎样维护公司网站 运用政府职能 网络安全 什么是信息安全工程 谷歌营销的概念与含义 人们常说的网络安全一般包括 软件与信息安全学院 网络事件营销的注意点 南宁企业网站 莱西做网站 qq绑定手机号银行信息安全吗 深圳专业网站制作公司排名 建站营销 小米的营销案例分析 潍坊网站建设公司电话政府网络安全通报 龙岗网站设计机构 网络安全产品介绍 网络安全中CIDF英文缩写 意大利 网络安全 网络安全准入控制系统 青岛网站建设培训 网络营销优化顾问 北京建设网站的公司 德惠网站 郑州网站设计 seo网站系统 老王解读网络安全法 国家信息安全测评认证中心 网络安全协议理论与... 五金 网络 推广 营销 网站首页设计 网络安全常用工具 信息安全竞赛官方网站 湛江做网站 深圳 企业网站建设 wifi信息安全 旅游电子商务网站的建设包括哪些步骤?网站建设中有哪些常用技术? 网站首页设计 人们常说的网络安全一般包括 网站建设联系电话 南宁网站建设教学 信息安全管理体系内审 网络安全中CIDF英文缩写 营销推广电子商务网站 天津信息安全公司排名 江苏网站制作企业 万网站建设 日本国家信息安全战略 贵阳专业性网站制作 北京附近做网站的公司 网站挂黑链 如何对信息安全提问,-1 网站开发中 保定设计网站建设 网络与信息安全小组 xx公司信息安全解决方案 饭客网络安全论坛 意大利 网络安全 美橙网站维护 手机网站空间 五金 网络 推广 营销 网络安全 数据 网站建设费 我国信息安全论文 武汉专业网站做网页 酷炫给公司网站欣赏 qq绑定手机号银行信息安全吗 江苏网络营销推广报价 网络安全在哪设置 网站建设费 企业网络营销活动方案 广西网信信息安全 招聘,-1 网络安全常用工具 网络安全厂家分类 电商营销服务 青岛网站建设培训 东莞网站制作 国家网络安全周主题 中山移动网站建设报价 互联网营销理论 哈尔滨网站开发 网络安全产品介绍 信息安全公司资质证书,-1 建设营销型网站的要素 网络安全小工具 苍南网站建设 杭州网站排名 武汉专业网站做网页 信息安全专业领军人物 网站挂黑链 长安手机网站建设 手机端网站设计 网络安全 数据 莱西做网站 信息安全周报 网站推广营销案例 信息安全分类分级指南南京网站推广 优秀企业网站 什么是020营销模式 公安网络安全检查 营销的投入 信息网络安全监察工作 珠海专业网站建设价格 企业网站制作 公安信息安全 检测中心 信息安全杂志有哪些内容,-1 网站有哪几种 郑州微网站建设 网络安全等级保护版本 网络安全风险提示 信息安全服务资质咨询中心,-1 网络营销事业部 北京附近做网站的公司 贵阳专业性网站制作 wifi信息安全 信息安全管理规范立项 营销推广电子商务网站 sdlc 信息安全 数据中心 年度网络安全检查报告 珠海专业网站建设价格 中国网络营销环境研究现状分析 互联网信息安全办公室 郑州微网站建设 珠海集团网站建设 国家信息安全漏洞 网络安全协议理论与... 网络公关营销公司 南宁网站建设教学 合肥网站制作 赣州网站推广 聂森 信息安全 信息安全公司资质证书,-1 seo精准营销 网络公关营销公司 德惠网站 深圳专业网站制作公司排名 互联网营销证书问答营销的营销 思路 互联网营销证书问答营销的营销 思路 高校网络安全实验室网站制作公司哪家专业 网络安全小工具 网络安全控制中主要考虑的方面是 线上营销 互联网营销 问题研究 网站进度表 网络安全产品介绍 网络安全中CIDF英文缩写 意大利 网络安全 网络安全准入控制系统 青岛网站建设培训 网络营销优化顾问 北京建设网站的公司 德惠网站 郑州网站设计 seo网站系统 老王解读网络安全法 国家信息安全测评认证中心 网络安全协议理论与... 五金 网络 推广 营销 网站推广营销案例 意大利 网络安全 智能手机网络安全 国家信息安全测评认证中心 东莞网站制作 网络安全协议理论与... 企业网站建立哪 网站推广营销案例 西安网络技术有限公司网站 功能类网站 怎样维护公司网站 wifi信息安全 网络安全小工具 网络公关营销公司 国际网络安全顾问 企业网站制作 郑州网站设计 网络安全厂家分类 郑州微网站建设 网站建设链接 网站建设素材使用应该注意什么 杭州电子科技大学信息安全 网站进度表 网站建设策略 信息安全竞赛官方网站 智能手机网络安全 聂森 信息安全 如何对信息安全提问,-1 维护国家信息安全 智能社交营销平台 企业网络营销活动方案 网站制作行业 龙岗网站设计机构 信息安全 logo 高校网络安全实验室网站制作公司哪家专业 手机网站空间 网络安全等级保护版本 五金 网络 推广 营销 中山移动网站建设报价 南宁网站建设教学 公安部信息安全等级保护评估中心 2004年国家信息安全专项 如何网络安全建设 如何网络安全建设 营销推广电子商务网站 网站首页设计 深圳大型网络营销公司 网络安全身份认证技术 做网站的软件 信息安全杂志有哪些内容,-1 网站制作模板 潍坊网站建设公司电话政府网络安全通报 国家信息安全漏洞 网站站欣赏 信息网络安全监察工作 网站进度表 武汉专业网站做网页 高校网络安全实验室网站制作公司哪家专业 网络安全编程的特点 建设营销型网站的要素 网站酷站 保定设计网站建设 珠海专业网站建设价格 合肥网站制作 网络安全厂家分类 营销qq怎么推广方案 网络安全中CIDF英文缩写 手机端网站设计 什么是信息安全工程 数据中心 年度网络安全检查报告 信息安全服务资质咨询中心,-1 广东营销网站建设服务公司 哈尔滨网站开发 赣州网站推广 信息安全监控体系 信息安全监控体系 保定设计网站建设 网站维护 数据中心 年度网络安全检查报告 网站建设联系电话 信息安全专业领军人物 互联网营销证书问答营销的营销 思路 美橙网站维护 延安网站建设公司电话 网络安全协议理论与... 国家网络安全周主题 网络公关营销公司 日本国家信息安全战略 网站制作行业 晋城做网站 信息安全技术手段包括 信息安全管理规范立项 旅游电子商务网站的建设包括哪些步骤?网站建设中有哪些常用技术? 苍南网站建设 网络安全与黑客的关系 人们常说的网络安全一般包括 我国信息安全论文 seo网站系统 3g网站制作 厦门企业网站制作 天津信息安全公司排名 国家信息安全漏洞 互联网营销 问题研究 我国信息安全论文 北京附近做网站的公司 湛江做网站 信息安全公司资质证书,-1 信息安全公司资质证书,-1 延安网站建设公司电话 信息网络安全监察工作 北京建设网站的公司 广西网信信息安全 招聘,-1 中国网络营销环境研究现状分析 龙岗网站设计机构 长安手机网站建设 网络安全小工具 信息安全入门网络安全监督管理电话 网络安全风险提示 网站建设策略 互联网营销理论 合肥网站制作 3g网站制作 什么是020营销模式 网络营销实训课程设计 网络安全在哪设置 网络安全攻防linux 人们常说的网络安全一般包括 企业网络营销活动方案 网站推广营销案例 意大利 网络安全 智能手机网络安全 国家信息安全测评认证中心 东莞网站制作 网络安全协议理论与... 企业网站建立哪 网站推广营销案例 西安网络技术有限公司网站 功能类网站 怎样维护公司网站 wifi信息安全 网络安全小工具 网络公关营销公司 国际网络安全顾问 企业网站制作 郑州网站设计 网络安全厂家分类 郑州微网站建设 网站建设链接 信息安全周报 南宁网站建设教学 网站维护 酷炫给公司网站欣赏 今日网络安全事件 西安网络技术有限公司网站 四川冠辰网站建设 网站建设费 珠海专业网站建设价格 深圳专业网站制作公司排名