Lesson 3: Rows & Columns

While containers are very useful, columns is where Bootstrap's grid really shows its power. The grid in Bootstrap is 12 columns wide. You can use any number of columns equalling twelve or less.

Bootstrap Tip: Containers and columns are invisible unless you specify a background and/or border. This demo has some extra CSS classes to make them show up for learning purposes.

The first thing you need to know is that rows require a container and columns require a row.

Containers provide a means to center and horizontally pad your site's contents.
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
Using .container will create a responsive set-width layout that changes at each breakpoint.

Since Bootstrap is developed to be mobile first, they use a handful of media queries to create sensible breakpoints for layouts. These breakpoints are based on minimum screen widths and allow your layout to scale elements as the viewport changes.

In the table below you can see the set-width of each .container element in each breakpoint.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

Using .container-fluid will create a fluid layout element that spans 100% across all viewport and device sizes.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
Grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up.
Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
Column widths are set in percentages, so they're always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row div not the column divs.

Okay, so that's enough of that. Let's get to the examples. Again, at first Bootstrap seems like it is confusing. Once you get the hang of what's happening you'll see that it is pretty simple - and very powerful!

Example: 12 standard columns

Just so you can see it, I have here an example of the full twelve column grid.

1 of 12

2 of 12

3 of 12

4 of 12

5 of 12

6 of 12

7 of 12

8 of 12

9 of 12

10 of 12

11 of 12

12 of 12

Example: Standard columns

Responsive columns change size and shape as the viewport size changes. Most of the time that is the most useful way of laying out content. However, there are times when you need things to stay where you put them. The standard .col class will lock the location of columns. They will resize width-wise as the viewport changes but they will not stack as is the norm with responsive layouts. Resize your browser window to see this in action.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Example: Responsive columns vs standard columns

Using breakpoint specific columns is the best way to enable your site/app too work on any device. Use the col-{breakpoint}-* syntax to specify the column size you want. My personal preference is to design for the XL screen size (1200px or wider). If the width of the viewport drops below 1200px then the columns begin to stack vertically at 100% width. The syntax for a column spanning, say, 4 columns would be col-xl-4.

The example below shows standard columns along side responsive ones. Resize your window to see them in action.

BootStrap Tip: Remember - the columns below using the col-{breakpoint}-* syntax like col-md-4 are called responsive. As you resize your window you will see the responsive columns switch to 100% width automatically.

col-4

col-sm-4

col-md-4

col-lg-4

col-xl-4



<div class="container">
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>
    <div class="row my-2">
        <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>
    <div class="row my-2">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row my-2">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-4">col-lg-4</div>
    </div>
    <div class="row my-2">
        <div class="col-xl-4">col-xl-4</div>
        <div class="col-xl-4">col-xl-4</div>
        <div class="col-xl-4">col-xl-4</div>
    </div>
</div>

Jack's Tricks

As I worked my way through using Bootstrap over the past year, I found some tips to make things easier and many of them deal with the grid.

No more `.wrapper` layouts...sort of

The old method of using a wrapper to set the width of your layout can go bye-bye with Bootstrap. I mean, we usually work around 1200px width anyway since the most used screen width is the standard laptop screen display of 1366x768. Just use a <div class="container"></div> and you have a width of 1200px for your layout.

Here's where the "sort of" comes in. One issue you may run into here is the inclusion of a footer on short pages. The footer will sit at the bottom of the page contents - but what if the page is only a paragraph long? Bootstrap containers, rows, and columns have no height unless they contain content. So...the easiest thing to do is create a wrapper class or ID like so...


<style>
#wrapper{min-height:calc(100vh - 160px);}
</style>

The above code sets an ID named wrapper that sets a minimum-height of 100% of the viewport height MINUS 160px. Just adjust the calculation to the approximate height of your header/navbar and footer. As the page expands past the minimum height it will just act like any page and push the footer down.

Here you can see it in action.

Chain those classes

As with any CSS classes, you can chain them together like this: <div class="class1 class2 class3 class4 etc."></div>. Trust me, you will chain the tar out of classes with Bootstrap. Here is an example showing a column with chained classes:

This is my column


<div class="container">
    <div class="row">
    	<div class="col-xl-4 p-3 m-4 rounded border bg-primary text-white">
		This is my column
        </div>
    </div>
</div>

Looking at that code you will see the following chained classes in order:

A responsive column four grid-columns wide (col-xl-4)
padding level 3 (p-3)
margin level 4 (m-4)
rounded corners (rounded)
a default border (border)
primary blue background (bg-primary)
white text (text-white)

We will cover several of these classes in another lesson but it is important to understand how to chain classes in CSS.

Justify your columns

So what if I wanted that nifty blue box centered in the layout for a login box or something? You will notice that usually one column in a row sits to the left. To center one of the columns your first instinct would be to place empty columns on the left and right of the one you want centered - equaling twelve - which would work. That would be more trouble and more code than is needed. Bootstrap has a really nifty set of justification classes so you don't have to do that.

This is my column and it is to the left. Not at all useful when you want to make a site pretty.

Well lookie there! The column is in the middle now. This is much better!

What if I want to push one to the right? Yep, you can do that too.



<div class="container">
  <div class="row justify-content-center">
   <div class="col-4">
   This column is centered!
   </div>
  </div>

  <div class="row justify-content-end">
   <div class="col-4">
   This column is pushed right!
   </div>
  </div>
</div>

Adding the justify-content-center class to the row will center the selected column within the row.

Using the justify-content-end class to the row will push the column to the end of the row.

Yep, you guessed it. There is a justify-content-start too! That pushes a column to the beginning of the row. Since the default is left-justified this one doesn't see much use.

What about placing columns equally?

What if you have three columns that do not add up to the full 12 column grid width and you want them spaced evenly within the row? Maybe you want some space between the columns? Sure, that is easy too! Check out this example:

small one

bigger one

small one



<div class="container">
  <div class="row justify-content-around">
   <div class="col-xl-3">
   small one
   </div>
   <div class="col-xl-4">
   bigger one
   </div>
   <div class="col-xl-3">
   small one
   </div>
  </div>
</div>

This uses the justify-content-around class to space the columns equally around the row.

There is another way to do this. Using the justify-content-between class....

small one

bigger one

small one



<div class="container">
  <div class="row justify-content-between">
   <div class="col-xl-3">
   small one
   </div>
   <div class="col-xl-4">
   bigger one
   </div>
   <div class="col-xl-3">
   small one
   </div>
  </div>
</div>

The justify-content-between class spaces columns equally between elements within the row. The left and right columns will be justified to the left and right and content between them will be spaced evenly. The demo contains padding so you can see the row...otherwise the left and right columns would be flush to the edges of the row like this....

small one

bigger one

small one

What about vertical alignment of a column?

The true Achilles Heel of CSS is that it really has no easy or concrete way of performing vertical alignment. Well, Bootstrap has that pretty well covered. The core of Bootstrap is flexbox. This is why these align and justify classes work well.

One of three columns

Two of three columns

Three of three columns


  <div class="container">
   <div class="row align-items-center justify-content-around">
     <div class="col-xl-3">
     One of three columns
     </div>
     <div class="col-xl-3">
     Two of three columns
     </div>
     <div class="col-xl-3">
     Three of three columns
     </div>
  </div>
</div>

Now, in this example, I am forcing the height of the row to 300px so you can actually see the vertical alignment in action. This is really the only way you will ever get this to work....Set a height on the containing row. Remember: Set the height on the row not the container.

Want a practical example of how to use this? Check this out.

How did I do that? Like this:



<div class="container-fluid">
  <div class="row align-items-center justify-content-around" style="height:100vh;">
    <div class="col-xl-5 bg-primary p-3 text-white rounded text-center">
    
    <h1>This sucker is smack dab in the middle.</h1>
    
    </div>
  </div>
</div>

Using the height of 100vh (100% of the viewport height), which is NOT Bootstrap, in conjunction with the Bootstrap container-fluid, which if you recall is 100% wide always, we have a huge DIV that covers the whole screen. Then we use these neato justify and align classes to put the column dead-center. Perfect for a login box or user notice!

Here is another example of this!

Looping over columns

As ColdFusion developers we are lucky in that we can use CF to generate cumbersome and repetitive code instead of manually doing so. So what if we want to query some data and then produce column elements for each item?

Now, the easiest way to create a grid of columns is to figure out how many columns you want to use based on our 12-column grid, and create responsive columns. So, if you want four columns you would use col-xl-3 and you would have four equal columns across regardless of how many records you are looping over. Three boxes (col-xl-3) times four columns equals twelve. Take a look at this.

Hiding specific columns on smaller screens

Sometimes you may need to hide specific content from mobile users or vice-versa. This can be done with the following neat little classes.

I will not appear on small screens

I will appear no matter what



<div class="container">
  <div class="row my-2">
    <div class="col-xl-4 d-xl-block d-none">
    I will not appear on small screens
    </div>
    <div class="col-xl-4">
    I will appear no matter what
    </div>
  </div>
</div>

Using a manual column break

On occasion you may need to loop over columns and want them to break at a specific point - say, every three columns. The mechanism to do this is very easy in Bootstrap. Use the w-100 class on a DIV tag where you want the break to happen.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Now let's try that in ColdFusion

col



<div class="container">
  <div class="row">

    <cfoutput>
     <cfloop index="i" from="1" to="6">
      <div class="col">Column #i#</div>
      
      <!-- check for every three columns and apply the column break -->
      <cfif (i MOD 3) IS 0><div class="w-100"></div></cfif>
      
     </cfloop>
    </cfoutput>

  </div>
</div>

ColdFusion Tip: Note how I used the modulus operator there. Modulus returns the REMAINDER of a division. So in this case the MOD operator takes the value number (i) and divides it by the provided number (3). If the remainder of that division is zero then the value number (i) is a whole number divisble by the provided number (3) and returns the number zero. This is how you can alternate table rows, highlight every other element in a list, etc.

This is the best way to use the MOD operator: #(variable MOD 2) IS 0#

Just doing #(variable MOD 2)# will return the remainder - which could be other than zero.

Concluding columns

Well, those are really the basics you need to get started with containers, rows, and columns. There are loads more examples on the Bootstrap website - a few of which I did steal for this lesson. Just remember, as you get started creating your sites with Bootstrap, keep it simple. That is always the best answer to building a website or app.

Lesson 2: Containers

Lesson 4: Spacing

Lesson 3: Rows & Columns

Example: 12 standard columns

Example: Standard columns

Example: Responsive columns vs standard columns

Jack's Tricks

No more .wrapper layouts...sort of

Chain those classes

Justify your columns

What about placing columns equally?

What about vertical alignment of a column?

Looping over columns

Hiding specific columns on smaller screens

Using a manual column break

Now let's try that in ColdFusion

Concluding columns

No more `.wrapper` layouts...sort of