Prelude
Continuing from Bootstrapping Your Web Pages 1 – Getting Ready where we left off. Having chosen a Bootstrap’s container for your web page, you can now turn your attention to designing responsive layouts that can adapt to different types of devices such as mobile phones, tablets, laptops and desktops, in the container. For that, you must have a good grip on the Bootstrap’s grid system.
Introducing Bootstrap’s Grid
Open the “bootstrap_starter_template.html” that you have created in the previous article or download it here, save it with a new name, say “bootstrap_grid.html“, then insert the following code in the <body> section:
<div class="container">
<div style="background-color:#CFF">content 1</div>
<div style="background-color:#9FC">content 2</div>
</div>
On the browser, the two inner <div>‘s will be stacked vertically in full width regardless of the displaying devices as shown in Figure 1 below or visit the on-line demo:
Figure 1: Default Grid-less Layout
The grid-less layout shown in Figure 1 is more appropriate for very small screens of mobile phones. For larger devices, you may want to place columns side by side in a single row across the page. Let’s see how this can be achieved using Bootstrap’s grid system
Bootstrap creates page layouts through a responsive, mobile-first grid system that comprises horizontal rows of columns or cells made of <div> tags that hold actual web contents and changes according to screen sizes.
In its basic form, each row in the Bootstrap’s grid can hold up to twelve single columns across a page. You can group several single columns together to create wider columns.
Twelve-Column Grid
The basic grid in Bootstrap allows up to twelve columns in a single row, which I aptly coined it “twelve-column grid“. Follow these steps:
- Wrap the two
<div>‘s in a containing <div class="row">; - Assign each of the two
<div>‘s a fraction of the number 12, say 4 and 8 respectively, that indicates the number of columns that each of them spans. These numbers must add up to twelve, which is the maximum number of columns allowed across a page horizontally. - Specify the smallest type of devices, say tablets denoted as sm in Bootstrap, on which you want them to display side by side in a single row across the screen.
The resulting code is shown below:
<div class="container">
<div class="row">
<div class="col-sm-4" style="background-color:#CFF">content 1</div>
<div class="col-sm-8" style="background-color:#9FC">content 2</div>
</div>
</div>
The class="col-sm-4" and class="col-sm-8" classes will transform the two inner <div>‘s of <div class="row"> from a full-width single-column vertical stack on mobile phones to two-column horizontal layout in the proportion of 4 to 8 on tablets and larger devices as indicated by the keyword sm which stands for “small” and refers to tablet width of 768px as the breakpoint where the transformation takes place.
As a result, on device types that are smaller than tablets, i.e. mobile phones, they will be stacked vertically and take up the full width on their browsers as shown in Figure 2 below or by re-sizing the on-line demo to less than the tablet size of 768px wide.
Figure 2: Single-column Vertical Stack on Mobile Phones
On the other hand, on the browser of tablet or larger devices, the two <div>‘s will display side by side in the proportion of 4 to 8 respectively across the page as shown in Figure 3 below or by re-sizing the on-line demo to more than the table size of 768px wide.
Figure 3: Two-column Horizontal Layout on Tablets and Larger Devices
In the preceding example, you have used one of the four Bootstrap’s grid classes, i.e. .col-sm-*, to create a web layout that appears as a full-width single-column vertical stack of two <div>‘s on mobile phones (Figure 3) and transforms to *-column horizontal layout across the page on scale-up screens of larger devices (Figure 4). The other three grid classes are .col-xs-*, .col-md-*, and .col-lg-*. Each grid class come starts with a prefix of .col followed by one of the four responsive breakpoint constants–xs, sm, md, and lg— and the number of spanned columns * separated by hyphens - as shown in Table 1 below:
Table 1: Bootstrap’s Grid Classes | PREFIX | | RESPONSIVE BREAKPOINT | | NO OF SPANNED COLUMNS |
.col | - | xs | - | 1 to 12 |
sm |
md |
lg |
In table 1, the responsive breakpoint parameter takes on one of the following four constants:
xs refers to “xtreme small” sized devices that are less than 768px wide, such as mobile phones.sm refers to “small” sized devices that are at least 768px wide, such as tablets and larger devices.md refers to “medium” sized devices that are at least 992px wide, such as desktops and larger devices.lg refers to “large” sized devices that are at least 1200px wide, such as large desktops.
and the number of spanned columns parameter takes an integer value from 1 to 12.
The effects of such grid classes on creating responsive layouts are described below:
.col-xs-*- Creates a <div> that spans * number of columns on “xtreme small” (
xs) sized devices that are less than 768px wide, such as mobile phones, and larger devices. Effectively, it applies to devices of any sizes. .col-sm-*- Creates a <div> that spans * number of columns on “small” (
sm) sized devices that are at least 768px wide, such as tablets, and larger devices. .col-md-*- Creates a <div> that spans * number of columns on “medium” (
md) sized devices that are at least 992px wide, such as desktops, and larger devices. .col-lg-*- creates a <div> that spans * number of columns on “large” (
lg ) sized devices that are at least 1200px wide such as larger desktops.
Seeing is believing. Include the four grid classes with single span columns in separate rows in a web page as shown below and available for download.
<div class="container">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#CFF">.col-xs-1</div>
<div class="col-xs-1" style="background-color:#9FC">.col-xs-1</div>
</div>
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#CFF">.col-sm-1</div>
<div class="col-sm-1" style="background-color:#9FC">.col-sm-1</div>
</div>
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
<div class="col-md-1" style="background-color:#CFF">.col-md-1</div>
<div class="col-md-1" style="background-color:#9FC">.col-md-1</div>
</div>
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#CFF">.col-lg-1</div>
<div class="col-lg-1" style="background-color:#9FC">.col-lg-1</div>
</div>
</div>
Launch it on a browser or visit it on-line, then re-size the browser to mimic the screens of mobile phone, tablets, desktops, and larger desktop respectively, and observe the effects of the respective grid classes in transforming the layout of their corresponding rows at their responsive breakpoints as the viewport re-sizes as shown from Figures 4 to 7 below. Notice that the layouts by lower-breakpoint grid classes such as .col-xs-* scale up to larger devices.
Figure 4: Xtreme Small (xs) Screen of Mobile Phone
Figure 5: Small (sm) Screen of Tablets
Figure 6: Medium (md) Screen of Desktops
Figure 7: Large (lg) Screen of Larger Desktops
You have learned that:
Note:
Bootstrap’s grid classes are mobile-first and always scale up. In other words, a grid class will affect devices with screen widths equal to or larger than its responsive breakpoint. As such, if you want to set the same widths for sm and md sized devices, you only need to specify .col-sm-*.
Hybrid Grids
You can assign multiple grid classes to grid columns to create highly responsive layout that changes at multiple breakpoints. Each grid class will affect the layout from its responsive breakpoint upwards until the next grid class with a larger responsive breakpoint is encountered.
Try out the following code that is also available for download:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:#CFF"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:#9FC"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p></div>
</div>
</div>
Launch it on a browser or view it on-line, then re-size the browser to mimic the screens of mobile phone, tablets, desktops, and larger desktop respectively, and observe the effects of the respective grid classes in transforming the layout at each breakpoint as shown from Figures 8 to 11 below.
Figure 8: Xtreme Small (xs) Screen
Figure 9: Small (sm) Screen
Figure 10: Medium (md) Screen
Figure 11: Large (lg) Screen
You have learned that:
Note:
While grid classes will scale up and affect devices with screen widths equal to or larger than its responsive breakpoint, they override grid classes targeted at smaller devices.
What you have experienced so far are responsive grid layouts that always transform to a fixed number of columns, albeit with different spanned columns that totaled 12 in a row, as the devices scale up. Can we have a layout that can provide different number of columns at different responsive breakpoints? That will bring us to the topic of wrap-column grid. Read on…
Wrap-Column Grids
To have different number of columns at different responsive breakpoints, you will have to assign multiple grid classes to grid columns which will inevitably cause the total of number of spanned column to exceed 12 at certain point.
Let’s say you want a 2-column layouts on mobile phones (xs devices) that can scale up to 4-column layout on larger devices, you may try the following code or download it on-line:
<div class="container">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-6 col-sm-3" style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div>
<div class="col-xs-6 col-sm-3" style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div>
</div>
</div>
It appears as expected a four equal-width columns across the page on sm sized and larger devices as the total number of spanned columns adds up to 12 as shown in Figure 12 below or view it on-line on sm sized and larger devices:
Figure 12: Four Equal-Width Columns on sm Sized and Larger Devices
On xs sized devices, however, the total number of spanned columns has exceeded 12 in a single row. Bootstrap will wrap the extra columns to the next line and this can result in unexpected outcome as shown in Figure 13 below or view it on-line on xs sized devices.
Figure 13: Layout Went Awry on xs Sized Devices
The layout has gone awry on xs devices! How to fix this? .clearfix to the rescue! See the amended code below or download it on-line:
<div class="col-xs-6 col-sm-3" style="background-color:#0CC;">Column 1: col-xs-6 col-sm-3<br>resize the browser and be surprised!</div>
<div class="col-xs-6 col-sm-3" style="background-color:#0CF;">Column 2: col-xs-6 col-sm-3</div>
<!--
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:#9C0;">Column 3: col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:#F90;">Column 4: col-xs-6 col-sm-3</div>
The code above adds .clearfix to the desired viewport which is xs in this case and you will solve your problem as shown in Figure 14 or view it on-line:
Figure 14: Properly Wrapped Column Grid on xs Sized Devices
Offsetting Columns
You can move a grid column to the right by * number of columns at any responsive breakpoint using one of the four Bootstrap’s grid offset classes–.col-xs-offset-* , .col-sm-offset-* , .col-md-offset-* , and .col-lg-offset-*–that corresponds to that breakpoint. This amounts to creating a void column that spans * number of columns at and above the breakpoint.
Try the following code or download it on-line:
<div class="container-fluid">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-4" style="background-color:#0CC;">col-xs-4</div>
<div class="col-xs-3" style="background-color:#0CF;">col-xs-3</div>
<div class="col-xs-5" style="background-color:#0CC;">col-xs-5</div>
</div>
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-4" style="background-color:#0CC;">col-xs-4</div>
<div class="col-xs-5 col-xs-offset-3" style="background-color:#0CF;">col-xs-5 col-xs-offset-3</div>
</div>
</div>
Launch it on a browser as shown in Figure 15 or view it on-line. With the first row acting as a guide that shows three grid columns in the proportion of 4:3:5, the second row reveals a 3-column spanned gap between the first and second grip columns effected by the .col-xs-offset-3 class that causes the second grid column to move 3 columns to the right.
Figure 15: Bootstrap’s Column Offset
For column grids that take on multiple grid classes, the effect of lower-breakpoint offset class will scale up and affect the layout of higher-breakpoint grid classes. This can results in unexpected outcome. Add .col-sm-6 to the preceding code as shown below or download it on-line:
<div class="container-fluid">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-4 col-sm-6" style="background-color:#0CC;">col-xs-4 col-sm-6</div>
<div class="col-xs-5 col-xs-offset-3 col-sm-6" style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6</div>
</div>
</div>
Launch it on a browser or view it on-line. When you re-size the browser to sm breakpoint and above, the 3-column offset from the xs breakpoint scales up and adds to the 12-column width of the two grid columns, causing the second column to be wrapped to the next line and shifted to the right by 3 columns as illustrated in Figure 16 below:
Figure 16: Column Offset Went Awry
To put it right, simply add an offset class with zero spanned column at sm breakpoint like this .col-sm-offset-0 to override any lower-breakpoint offset class which is .col-xs-offset-3 in this example. Try the code below or download it on-line.
<div class="container-fluid">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-xs-4 col-sm-6" style="background-color:#0CC;">col-xs-4 col-sm-6</div>
<div class="col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0" style="background-color:#0CF;">col-xs-5 col-xs-offset-3 col-sm-6 col-sm-offset-0</div>
</div>
</div>
The code above will prevent the column offset from propagating beyond sm breakpoint and thus allowing the planned 2 equal-column width layout to be rendered on sm sized and larger devices as shown in Figure 17 or view it on-line:
Figure 17: Proper Column Offset
Re-ordering Columns
You can easily change the order of grid columns at any responsive breakpoint with Bootstrap’s push and pull modifier classes in the forms of .col-<breakpoint>-push-* and .col-<breakpoint>-pull-*. Try the following code or download it on-line:
<div class="container-fluid">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-sm-4 col-md-push-8" style="background-color:#CFF">col-sm-4 col-md-push-8</div>
<div class="col-sm-8 col-md-pull-4" style="background-color:#9FC">col-sm-8 col-md-pull-4</div>
</div>
</div>
Launch it on a browser or view it on-line. The two grid columns appears as shown in Figure 18 on sm sized devices but are being re-ordered on md sized and larger devices as shown in Figure 19 effected by .col-md-push-8 and .col-md-pull-4 in the respective grid columns.
Figure 18: Layout on sm Sized Devices
Figure 19: Layout on md Sized and Larger Devices
Nesting Columns
You can create nested column layout by simply adding a new .row class of grid columns with desired grid classes inside a grid column as shown in the following code or download it on-line:
<div class="container-fluid">
<div class="row" style="margin-top:1%;margin-bottom:1%">
<div class="col-sm-12" style="background-color:#CFF">
Level 1 Top
<div class="row">
<div class="col-sm-4" style="background-color:#9C0">Lever 2: col-sm-4</div>
<div class="col-sm-8" style="background-color:#F90">Lever 2: col-sm-8</div>
</div>
Level 1 Bottom
</div>
</div>
</div>
Launch it on a browser or view it on-line. It will appear as shown in Figure 20 on sm sized and larger devices.
Figure 20: Nested Columns
Next Up
You have gotten a good grip of Bootstrap’s responsive, mobile-first grid system, it is time to look into the Bootstrap’s styling of web contents. What’s up on the next shipment.? We shall see. Meanwhile, let’s pause for a breather.
The post Bootstrapping Your Web Pages 2 – Laying Out Responsively appeared first on Peter Leow's Code Blog.
