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
天津网站开发泰合信息安全运营中心系统-日志审计网络安全工作会济南网站建设公司公安局网络安全大队国家空间网络安全学院珠海网站营销涪陵做网站温州网站建设联系电话采用邮件营销的广告穿越到文娱行业刚刚起步的平行世界,方淮南激活了影帝系统,可以获得前世任意一位影帝级人物的表演经验! 他一个人就开创了华娱影坛十年的辉煌时刻! 他是《无间风云》里城府深沉的黑帮老大琛哥; 也是《枪燃》里忠义痞气交织的打手阿来; …… 正当所有人都以为方淮南只会演反派角色的时候, 他跑到横店去出演了《猫妖传》里五分钟的配角, 将盛唐气势下,那位如醉似癫的李白演出了神韵! 这时,所有人才知道方淮南的戏路宽阔到何等地步! …… 面对采访,融合了上百位影帝经验的方淮南很谦虚的表示: “我,不过是站在了巨人的肩膀上罢了。”  综武大陆,王朝林立。   李损穿越而来,成为古墓派唯一男弟子,激活鸿蒙签到系统。    从此丹药、神功,样样不缺,美女、公主接连不断。   九阴真经我有!   十绝体我有!   大还丹我有!   降龙十八掌我有!   我有!我有!我全都有!   李损签到十年,自此无敌世间!                   林尘做梦也没想到,给自己戴绿帽的女人不仅百般羞辱他,甚至还要抢夺他女儿的心脏! 对爱情彻底失望的他,更没想到,这世界上还会有这样一个女孩,愿意为他付出一切! 在那重重包围中,他鲜血淋漓。 我今天就要带走她,我看谁敢拦我!所谓神明,不过是蛰伏在暗影之处的小偷! 他们需要称颂,他们需要信仰,他们需要祭祀,他们需要血肉。 他们自称给予你所想要的一切,在你耳边低声呓语!这是我的第一个作品,感谢大家的观看!上一秒还在午休的我 下一秒我睁开眼睛发现一切都变得陌生 我新买没有一个星期的空调呢,没有你我该怎么活 不对,现在我应该在梦里。 可是为什么被打会这么疼 够了,住手。想知道是不是做梦你不会打自己呀 我一脸无语看着刚认识不久的网红小姐姐人之死也!魂归地府!辩善惩恶进入轮回。茅山派第十八代传人茅十八带着他那个不靠谱的徒弟降服百鬼,将百鬼记录在百鬼录上。 得百鬼录者可号令百鬼成为鬼王。本该平凡,奈何世道所逼,捡起三尺长剑,斩尽黑暗护你永生远古的预言,灾厄的降临。光明的征程,一次又一次的奇幻经历。遮天计划将破, 活在月色下的人类该何去何从。 活在阳光下的怪种从地狱里一涌而出。 ……… 看着眼前一排神明头上顶着的金圈。 “原来神明这么短命啊。” “那我不做神明了。” 少年发出桀桀笑声,“还是屠杀神明吧!”
白帽学院 信息安全 网络营销文章 免费足网站 企业手机网站建设策划方案 景区网络营销的方式 信息安全保护等级 国标 营销帮手4.0官方网站 uiwebview网络安全配置 网络营销服务包括哪些内容 php 网络安全 感情纠纷的前世因果【www.richdady.cn】 灵魂治疗与心理辅导【www.richdady.cn】 公司破产后如何重新创业咨询【www.richdady.cn】 阴间生活的前世解析咨询【www.richdady.cn】 财运不佳的投资建议【www.richdady.cn】 婴灵的化解方法【www.richdady.cn】√转ihbwel 家庭关系的和谐共建【微:qq383550880 】√转ihbwel 儿子不读书的案例分享咨询【微:qq383550880 】√转ihbwel 无形干扰的前世因果【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 事业不顺的应对策略咨询【σσЗ8З55О88О√转ihbwel 前世今生的奇妙经历咨询【σσЗ8З55О88О√转ihbwel 与女友前世的故事分析【企鹅383550880】√转ihbwel 家庭关系中的矛盾如何解决?咨询【σσЗ8З55О88О√转ihbwel 事业不顺的职场调整有哪些方法?咨询【www.richdady.cn】√转ihbwel 老公家暴的法律咨询咨询【企鹅383550880】√转ihbwel 老公家暴的原因分析咨询【微:qq383550880 】√转ihbwel 如何化解婴灵带来的负面影响?咨询【企鹅383550880】√转ihbwel 感情纠纷的情感疏导咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 如何提高孩子的阅读兴趣?咨询【σσЗ8З55О88О√转ihbwel 意外事故的主要原因分析【www.richdady.cn】√转ihbwel 营销传播的概念 企业信息安全保护的重要性 信息化与网络安全协会 中央网络安全和信息... 济南做网站的公司有哪些 专业营销外包公司 php 网络安全 北京网站建设报价 信息安全渗透测试求职,-1 关于公司建网站 uiwebview网络安全配置 网站建设使用哪种语言好 济南网站建设公司 河南信息安全电子中心 西安营销师 网络安全条例解读 网站双域名 互联网营销软件怎么样 台州手机网站建设 word中编辑好的文字复制到网站后台编辑器里格式全没有了网络营销在我国的发展现状分析 库易网网站 微信营销软件招代理商 找人做网站 郑州最好的网站建设 德清做网站 免费网站域名注册 如需手机网站建设 广东网络安全执法 网络营销服务包括哪些内容 乐清做网站的公司有哪些 中国信息安全测评中心广东测评中心 银监会 网络安全 全国信息安全大赛作品 涿州做网站 外贸网络营销主要营销方式 中国信息安全办 景区网络营销的方式 静安西安网站建设 东莞营销网站制作 西安网络营销岗位数量 中国网络安全网 忻州做网站 无锡集团网站建设 唐山做网站 网站生成软件 恒安 网络安全 整合营销成功的案例 景区网络营销的方式 营销传播的概念 郑州建网站公司 北京网站建设报价 北京代建网站 电商网站制作 电商网站制作 信息安全备案 印度的信息安全 邢台网站制作哪家强 白帽学院 信息安全 2014年信息安全事件 阿里巴巴 信息安全,-1 湖南企业网站建设 房地产全程网络营销系统对房产公司的营销推广有什么帮助? 西安营销师 网络安全必要性2016 网络营销的市场前景 对信息系统运营使用单位的信息安全等级保护工作情况,-1 网站用橙色 我想做个网站 c2c网站有哪些 防火墙 公共网络安全 信息安全渗透测试求职,-1 电子科技公司网站网页设计 网络安全动画 网站建设使用哪种语言好 信息型网站 微博广告营销案例 佛山网站建设是哪个 常州网站价格 你对网络营销的例子 php 网络安全 工信部 网络安全处 微信营销软件招代理商 网络安全条例解读 做网站 深圳 国家对互联网信息安全 国家对互联网信息安全 房地产全程网络营销系统对房产公司的营销推广有什么帮助? 网站打开速度 无线网络信息安全 我想建网站 关于公司建网站 网络营销的价值在于 营销帮手4.0官方网站 济南做网站的公司有哪些 公司网站开发制作 第五届全国信息安全等级保护技术大会,-1 网络安全网络文明 保定市网站建设 中央网络安全和信息... 公安局网络安全大队 信息安全 863 营销建站 网站双域名 网络营销促销策略 信息安全与管理 天津网站开发 2016年中国网络安全发展形势展望 2014年网络安全 互联网广告营销特点是什么意思 网络安全 存在问题网站建设素材 uiwebview网络安全配置 互联网营销是做什么的 趋势科技2014 年第一季度信息安全报告 阳光网络安全资料 营销行业学院 互联网营销是做什么的 西安网络营销岗位数量 网站语言那种好 网络安全人员评估法案 网络安全案例ppt mcafee 网络安全 台州手机网站建设 重庆九龙坡营销型网站建设公司推荐 南昌网站建设公司渠道 无线网络安全问题和防范 白帽学院 信息安全 网络营销服务包括哪些内容 大数据与信息安全讲座 乐清做网站的公司有哪些 网站建设西安 恒安 网络安全 外贸网络营销主要营销方式 库易网网站 网站生成软件 网络安全案例ppt 信息安全测试设备 大数据与信息安全讲座 唐山做网站 网站图片大小 珠海网站营销 银监会 网络安全 微博营销 2016年中国网络安全发展形势展望 上海网络营销策划公司 涪陵做网站 网站图片大小 信息安全从业者 有关网络安全的新技术 无锡集团网站建设 微信营销软件招代理商 信息安全 课堂 江西企业网站建设 网络营销促销策略 工信部 网络安全处 静安西安网站建设 网站的做用 怎样给网站增加栏目 景区网络营销的方式 网络安全基础的rsa的全称是什么 整合营销成功的案例 湖南企业网站建设 温州网站建设联系电话 个人电脑网络安全 网络安全热点问题 网络营销的市场前景 网络营销服务包括哪些内容 微网站营销 旅游网站开发 唐山做网站 营销建站 南昌网站制作 博客营销细节 网络安全动画 天津网站开发 信息安全保护等级 国标 外贸网站模板建立 网络安全的正能量视频 南昌网站制作 微网站域名 信息安全合规网站制作哪家专业 珠海网站营销 如何作做网站 郑州建网站公司 东莞营销网站制作 计算机信息网络安全的技术支持 趋势科技2014 年第一季度信息安全报告 网站制作 价格 网站建设使用哪种语言好 关于公司建网站 2014年网络安全 搜索再营销 佛山网站建设是哪个 php 网络安全 邢台网站制作哪家强 网络营销的市场前景 微信营销软件招代理商 网络安全案例ppt word中编辑好的文字复制到网站后台编辑器里格式全没有了网络营销在我国的发展现状分析 网站开发合同网络安全小报字体设计 uiwebview网络安全配置 外贸网站建设上海 商业网站模板 中国网络安全网 我想建网站 阿里巴巴 信息安全,-1 大数据与信息安全讲座 常州网站价格 网络推广营销师 第五届全国信息安全等级保护技术大会,-1 网络安全必要性2016 工信部 网络安全处 关于公司建网站 营销行业学院 互联网广告营销特点是什么意思 mcafee 网络安全 国家网络安全信息小组 信息安全备案 如需手机网站建设 白帽学院 信息安全 天津网站开发 互联网营销软件怎么样 怎样给网站增加栏目 网站生成软件 信息安全渗透测试求职,-1 西安营销师 无线网络信息安全 网络安全网络文明 阳光网络安全资料 顺德做网站的公司 顺德做网站的公司 广东网络安全执法 国家空间网络安全学院 信息安全渗透测试求职,-1 网站打开速度 信息安全与管理 静安西安网站建设 网络营销的价值在于 c2c网站有哪些 网络安全 存在问题网站建设素材 房地产全程网络营销系统对房产公司的营销推广有什么帮助? 你对网络营销的例子 第五届全国信息安全等级保护技术大会,-1 营销传播的概念 互联网营销软件怎么样 郑州建网站公司 免费网站域名注册 电商网站制作 防火墙 公共网络安全 电子科技公司网站网页设计 采用邮件营销的广告 我想建网站 网站用橙色 有关网络安全的新技术 企业信息安全保护的重要性 湖南企业网站建设 网站双域名 公司网站开发制作 互联网营销是做什么的 优秀网页设计网站 专业营销外包公司 北京代建网站 北京代建网站 防火墙 公共网络安全 个人信息安全保护研究意义如何建立信息安全标准化 网站双域名 网络营销服务包括什么 精致的网站 网络安全工作会 互联网信息安全评测机构 网站制作 价格 2014年信息安全事件 网络营销的价值在于 江西企业网站建设 网络推广营销师 网络营销文章 信息安全组织机构 印度的信息安全 优秀网页设计网站 网站用橙色 公安局网络安全大队 美国网络营销人员工资 全国信息安全大赛作品 上海网站推广公司 富阳网站公司 营销主要营销 网络安全动画 微信营销软件招代理商 门户类网站费用 免费网站域名注册 婚纱摄影网站设计 你对网络营销的例子 西安营销师 如需手机网站建设 网站语言那种好 网络安全人员评估法案 网络安全案例ppt mcafee 网络安全 电商网站制作 房地产全程网络营销系统对房产公司的营销推广有什么帮助? 南昌网站建设公司渠道 陕西网站建设多少钱 白帽学院 信息安全 网络营销服务包括哪些内容 互联网信息安全评测机构 乐清做网站的公司有哪些 房地产全程网络营销系统对房产公司的营销推广有什么帮助? 恒安 网络安全 外贸网络营销主要营销方式 网站打开速度 库易网网站 中央网络安全和信息... 信息安全 课堂 大数据与信息安全讲座 唐山做网站 网站图片大小 德清做网站 银监会 网络安全 信息安全与管理 2016年中国网络安全发展形势展望 上海网络营销策划公司 我想做个网站 常州网站价格 信息安全从业者 恒安 网络安全 无锡集团网站建设 微信营销软件招代理商 信息安全 课堂 顺德做网站的公司 上海网络营销策划公司 国家对互联网信息安全 济南做网站的公司有哪些 网站的做用 邢台网站制作哪家强 景区网络营销的方式 网络安全基础的rsa的全称是什么 电子商务营销的关键是 湖南企业网站建设 温州网站建设联系电话 个人电脑网络安全 网络安全热点问题 网络营销的市场前景 网络营销的市场前景 微博营销 旅游网站开发 c2c网站有哪些 网络安全产品名字 门户网站制作 白帽学院 信息安全 信息型网站 营销主要营销