Chapter 4. Working with Layouts

The core of any Bootstrap website is the layout or grid component. Without a grid, a website is pretty much useless. One of the biggest layout challenges we face as web developers nowadays is dealing with a large array of screen resolutions, from desktop to tablets, mobile phones, and even Apple watches. It is not easy to lay out a website and we rely on responsive web design and media queries to take a mobile-first approach. Perhaps the best feature of the Bootstrap layout grid is that it's mobile-first and built using media queries. This takes the hardest part out of constructing a grid and lets us concentrate on the actual design of our projects. Before we start to layout the next part of our blog project, let's review the lay out grid basics in Bootstrap 4.

In this chapter, we are going to discuss the following listed topics briefly:

• Working with containers

• Adding columns to your layout

• Creating a simple three-column layout

• Coding the blog home page

• Using responsive...

Working with containers

The base of any Bootstrap layout is a container class. There are two types of containers you can choose to use. The first is .container-fluid, which is a full-width box and will stretch the layout to fit the entire width of the browser window.

There is some left and right padding added so the content doesn't bump right up against the browser edge:

The second option is the basic .container class, which will have a fixed width based on the size of your device's viewport. There are five different sizes in Bootstrap, with the following width values:

• Extra small <544px

• Small >544px

• Medium >768px

• Large >992px

• Extra large >1140px

Let's take a look at the markup for both container types. I'll start with the basic .container class:

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

That's pretty easy. Now let's look at the code for the fluid container:

<div class="container-fluid"> 
  ... 
</div> 

Again, that is straightforward...

Inserting rows into your layout

The next step in creating a layout is to insert at least a single row of columns. Each container class can have one or more rows nested inside of it. A row defines a collection of horizontal columns that can be broken up to twelve times. The magic number when it comes to columns in Bootstrap is twelve, and you can sub-divide them any way you like. Before we get into columns though, let's review the markup for rows. First let's look at an example of a container with a single row:

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div> 
</div> 

As you can see, this is an easy next step in setting up your layout. Like I mentioned, you can have as many rows within a container as you like. Here's how you would code a five-row layout:

<div class="container"> 
   <div class="row"> 
      <!-- insert column code here //--> 
   </div>...

Adding columns to your layout

Before we jump into actually adding the columns, let's talk a little bit about the different column classes you have at your disposal with Bootstrap. In Bootstrap 3 there were four different column class widths to choose from: extra small, small, medium, and large. With Bootstrap 4, they have also introduced a new extra large column class. This is likely to allow for extra large monitors, like you would find on an iMac. Let's go over the fine points of each column class in Bootstrap 4.

Extra small

The smallest of the grid classes uses the naming pattern .col-xs-#, where -# is equal to a number from 1 to 12. Remember, in Bootstrap, your row must be divided into a number of columns that adds up to 12. A couple of examples of this would be .col-xs-6 or .col-xs-3. The extra small column class is for targeting mobile devices that have a max-width of 544 pixels.

Small

The small column class uses the syntax pattern .col-sm-#, and some examples of that would be .col-sm...

Choosing a column class

This is a good question. With all of the class options, it can be hard to decide which ones to use. If you are building a mobile app, then you would likely want to stick to the extra small or small column classes. For a tablet, you might want to use medium. If the primary user for your application will be on a desktop computer, then use the large or extra large classes. But what if you are building a responsive website and you need to target multiple devices? If that is the case, I usually recommend using either the medium or large column classes. Then you can adjust to use larger or smaller classes where necessary if you have a component that needs some extra attention for specific resolutions.

Creating a simple three-column layout

Let's assume that we are building a simple responsive website and we need a three-column layout for our template. Here's what your markup should look like:

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div> 

As you can see, I've inserted three <div>s inside my row <div>, each with a class of .col-md-4. For devices that have a resolution of 768 pixels or greater, you'll see a three-column layout like this:

Now, if you were to view this same layout on a device with resolution smaller than 768 pixels, each column's width would change to 100% and the columns would be stacked...

Mixing column classes for different devices

Adding additional classes to each of our column <div>s will allow us to target the grid layout for different devices. Let's consider our three-column layout from before, but this time, we want to lay it out like this:

• The first two columns should be 50% of the layout

• The third column should stretch 100% of the layout and be below the first two

To achieve this layout, we'll mix some different column classes. Here's what the markup should look like:

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4 col-xs-6"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div> 

I've added the .col-xs-6 class to the first two...

Coding the blog home page

Now that you have a good grasp of how to use the Bootstrap 4 grid, we're going to code up our blog home page. This page will include a feed of posts, a sidebar, and a newsletter sign-up form section at the bottom of the page. Let's start by taking the code we wrote in Chapter 2 , Using Bootstrap Build Tools for our hello world! template and duplicating the entire directory. Rename the folder Chapter 4: Working with Layouts or Bootstrap Layout.

Note

Remember, we are using the regular grid moving forward, not the Flexbox grid. Make sure you are using the default build of bootstrap.min.css. If you carry out a simple duplication of the second chapter's code then you'll have the right file configuration.

Writing the index.ejs template

Good news! Since we set up our Harp project in Chapter 2 , Using Bootstrap Build Tools, we can reuse a bunch of that code now for our blog home page. There's no need to make any updates to the JSON files and header or footer partials. The...

Using responsive utility classes

Responsive utility classes will allow you to selectively hide <div>s or components based on the screen resolution size. This is great for creating a mobile-first web application, because in many cases you'll want to hide some components that don't work well on a phone or tablet. Mobile application design generally means a simpler, more minimal experience some using responsive utility classes will allow you to achieve this. Open up index.ejs in a text editor and go down to the sidebar <div>, then add the .hidden-md-down class to your code:

<div class="col-md-4 hidden-md-down"> 

Adding this class will hide the <div> from the browser when your screen resolution is smaller than 720 pixels. Make sure your column class, in this case -md, matches the hidden class. Now, if you shrink your web browser down again, you'll notice that the sidebar <div> will disappear.

There are a number of responsive utility classes you can use in your...

Summary

This chapter has been a detailed explanation of the Bootstrap layout grid, how to use it, and how to build a sample project. We started out by learning the basics of the Bootstrap container, container-fluid, and row classes. Next, we moved onto learning the differences between all the Bootstrap column classes. Following the columns, we covered some more advanced topics, like offsetting columns, spacing, and responsive utilities. Once you had a solid understanding of the grid, we coded up the remaining page layouts that we'll need for the rest of the book. Now that we have everything set up, we'll start to drop some real content into the blog using Bootstrap content classes.