- Bootstrap Site Blueprints
- David Cochran Ian Whitley
- 417字
- 2021-07-16 12:27:40
Creating responsive columns
We have three blocks of text, each with a heading, a short paragraph, and a link. In screen sizes of approximately tablet width or more, we would like this content to be laid out in three columns. In narrower screen widths, the content will organize itself in one full-width column.
Take a moment to visit and read the documentation for Bootstrap's mobile-first responsive grid. You can find it at http://getbootstrap.com/css/#grid.
In short, the grid is based on a twelve-column system. The basic class structure allows us to use a class of col-12
for full-width, col-6
for half-width, col-4
for one-third width, and so on.
With Bootstrap 3, thanks to the creative use of media queries, Bootstrap's grid can be very adept. Recall that we want our welcome message to have a single-column layout up to tablet-sized screens, and then adapt a three-column layout at approximately 768px. Conveniently, Bootstrap has a built-in breakpoint at 768px, which is the default value of its @screen-sm-min
variable. Above 768px is the medium range beginning at 992px, corresponding to a @screen-md-min
variable, then the large screen, beginning at 1200px and up. I'll refer to these as Bootstrap's small, medium, and large breakpoints.
With the small breakpoint there is a special column class that uses the formulation col-sm-
. Because we want three columns after the small breakpoint, we'll use class="col-sm-4"
. Below the small breakpoint, the elements will remain full-width. Above it, they will shift to 1/3 width and line up side by side. The full structure is given here, with paragraph contents abbreviated for clarity:
<div class="container"> <div class="row"> <div class="col-sm-4"> <h2>Welcome!</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">See our portfolio</a></p> </div> <div class="col-sm-4"> <h2>Recent Updates</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">See what's new!</a></p> </div> <div class="col-sm-4"> <h2>Our Team</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">Meet the team!</a></p> </div> </div><!-- /.row --> </div><!-- /.container -->
If you're unfamiliar with the container
and row
classes, here is what they do:
- The
container
class constrains the width of the content and keeps it centered within the page - The
row
class provides the wrapper for our columns, allowing extra left and right margin for the column gutters - Both the
container
class and therow
class areclearfixed
, so that they contain floating elements and clear any previous floating elements
Now, save and refresh. With your browser width above 768px, you should see the following three-column layout take shape:

Resize your browser window below 768px, and you'll see it revert to a single column.

With our responsive grid in place, let's turn those links into clearly visible calls to action by utilizing Bootstrap's button styles.
- Mastering Node.js(Second Edition)
- 物聯網工程規劃技術
- 網管員典藏書架:網絡管理與運維實戰寶典
- 從區塊鏈到Web3:構建未來互聯網生態
- Django 2 by Example
- 網絡安全技術與解決方案(修訂版)
- Yii Application Development Cookbook(Second Edition)
- Mastering Dart
- Kong網關:入門、實戰與進階
- 4G小基站系統原理、組網及應用
- Echo Quick Start Guide
- 物聯網工程導論(第3版)
- 異構蜂窩網絡關鍵理論與技術
- 網絡空間全球治理觀察
- Enterprise ApplicationDevelopment with Ext JSand Spring