Separate Bootstrap Columns By Horizontal Whitespace

Bootstrap is awesome. Especially for building sites fast. It does, however have some limitations. Ever tried creating a grid layout where the columns are separated by whitespace? Simple if the coloumns don’t have any background colour. A bit trickier if they do.

You could try adding margins between the columns, but then you would also have to manually modify the width of the columns. The chances are you would be forced to mix pixel and percentage values, which is rarely a good way to go. In this post I’ll demonstrate how you can add whitespace between columns with some simple CSS.

Difficulty: 1/5

Time: 1/5

NOTE: The source files and an online demo are included at the end of the post, so for you impatient souls, you have the opportunity to skip the reading part if you feel like it.

NOTE 2: I’ll assume you have basic knowledge of the Bootstrap grid system. If you don’t, I recommend checking out http://getbootstrap.com/css/#grid.

Okay then, first things first. We need to set up the basic HTML. I’ll start by adding a container. Our row will be placed within this.  The row will consist of four columns.

 

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

        <div class="col-md-3">
            <h2>Heading</h2>
            <p>Thing 1<p>
        </div>

        <div class="col-md-3">
            <h2>Heading</h2>
            <p>Thing 2<p>
        </div>

        <div class="col-md-3">
            <h2>Heading</h2>
            <p>Thing 3<p>
        </div>

        <div class="col-md-3">
            <h2>Heading</h2>
            <p>Thing 4<p>
        </div>

    </div>
</div>

 

So far, everything looks familiar. Now, we’ll add another div inside each of the columns, surrounding the h2’s and p’s. This div will have a class of fw-place-within-col (class name for illustration purposes only. Call it whatever you want!). This div and class are the keys to achieving what we want. I’ll soon explain what we’ll do with them.

 

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

        <div class="col-md-3">
            <div class="fw-place-within-col">
                <h2>Heading</h2>
                <p>Thing 1<p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="fw-place-within-col">
                <h2>Heading</h2>
                <p>Thing 2<p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="fw-place-within-col">
                <h2>Heading</h2>
                <p>Thing 3<p>
            </div>
        </div>

        <div class="col-md-3">
            <div class="fw-place-within-col">
                <h2>Heading</h2>
                <p>Thing 4<p>
            </div>
        </div>

    </div>
</div>

 

Now that we have the HTML in place, it’s time to move over to the CSS. Here we’ll modify the padding of the columns, overriding default Bootstrap values. We’ll also use the fw-place-within-col class to make the magic happen!

 

.col-md-3 {
    padding-right: 5px;
    padding-left: 5px;
}
.fw-place-within-col {
    width: 100%;
    padding: 10px;
}

 

By adjusting the right and left padding of the column class, we have control over the spacing between the columns. Normally this would not add whitespace between the columns; it would simply move the content of the column further in from the edges (due to the box-sizing: border-box that’s used in Bootstrap).

By placing the fw-place-within-col class as a direct child of the column however, we can set the width of the column content (in this case the h2’s and p’s) to be smaller than the column itself, transforming the padding of the column into whitespace instead of regular padding.

The width: 100% of fw-place-within-col refers to 100% of the width of the parent column. The beauty is that the columns padding isn’t included in its width, which gives us the oppurtunity to use the column padding as whitespace. If that didn’t make any sense, see the illustration:

An image showing the theory behind how Bootstrap columns can be separated by whitespace
The padding of the .col-md-3 isn’t taken into account when setting the width of .fw-place-within-col, meaning we can set the width of .fw-place-within-col to 100% and use the .col-md-3 padding to control whitespace between columns. Click image for full size version.

The padding of fw-place-within-col isn’t really necessary to achieve what we want, but it’s a good way to make things a bit easier on the eye, especially if you have text content.

Okay, so that basically wraps things up. To add more rows, simply copy the one we already made. Also, you might need to add some margin to the top or bottom of each column when they stack (using .col-md, that would be at browser window widths below 992px). Hope you found this useful. If you notice anything strange with the method, don’t hesitate to let me know!

 

Online Demo Source Files

 

Posted in CSS