下面我們收集了基本的一些例子Bootstrap網格佈局。
三等分列
.col-sm-4
.col-sm-4
.col-sm-4
下面的例子說明如何獲取起始於平板電腦和擴展到大型台式機三個等寬列。 在手機上，列會自動疊加：
例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> 試一試» 三個不平等列
.col-sm-3
.col-sm-6
.col-sm-3
下面的例子說明如何獲取起始於平板電腦和擴展到大型台式機三個不同的寬度列：
例
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> 試一試» 兩個不相等的列
.col-sm-4
.col-sm-8
下面的示例演示了如何得到兩個不同的寬度列起始於平板電腦和擴展到大型台式機：
例
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> 試一試» 兩柱嵌套列
下面的例子說明如何得到兩列起始於平板電腦和擴展到大型台式機，具有較大的列中的另一個兩列（寬度相等）（在手機，這些列及其嵌套列將疊加）：
例
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> 試一試» 混合型：移動和桌面
該Bootstrap網格系統有四種類型： xs （電話）， sm （片）， md （桌面）和lg （大桌面）。 這些類可以結合起來，創造出更多的活力和靈活的佈局。
提示：每個類最高可擴展至，所以如果你想設置相同的寬度為xs和sm ，你只需要指定xs 。
例
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> 試一試» 提示：請記住，網格列加起來應該有十二個一排。 更重要的是，列將堆疊無論viewport 。
混合型：手機，平板電腦和台式機
例
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> 試一試» 清除浮動
清除花車（與.clearfix在特定的斷點類），以防止不均勻的內容奇怪的包裹：
例
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> 試一試» 列偏移
使用移動到右側列.col-md-offset-*類。 這些類增加一欄的左邊空白處*列：
例
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> 試一試» 推拉 - 更改列順序
更改與網格列的順序.col-md-push-*和.col-md-pull-*類：
例
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> 試一試»