We will start by creating the footer markup. We want this footer to be as functional and useful for the user as possible. We'll build the markup as follows:

In a viewport of 980px and larger, our columns should organize themselves as follows:

This is the layout we want in medium and larger viewports. Extra-small screen sizes are served just fine by the single-column layout. However, for tablet-width screen sizes that fall within the range of 768 to 980 pixels, our layout can benefit from some adjustments. Let's address that.

Test the layout in a viewport that falls between 768 and 980 pixels. Bootstrap refers to this as the small breakpoint, with the @screen-sm variable and col-sm- grid classes. At this width, the single-column layout leaves unnecessary white space. Here is what you'll see:

We can improve this layout by allowing our three lists of links to float next to each other. Using the Bootstrap col-sm- column classes, let's set the three lists of links to be one-third width, or col-sm-4, and the About Us column to be full width, or c ol-sm-12.

<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="about col-sm-12 col-md-6">

Save this and try it out in the small viewport range. You will see the following result:

Much improved! But we're not quite finished. Try clicking on the links in the upper three columns. Chances are that you won't be able to. Inspect the element and you'll find that the fourth div element contains the code for the About Us column. This code does not clear the floated columns above it. Though the About Us heading and its paragraph will appear below the three floating columns, the div element itself will overlap them.

In a standard Bootstrap layout situation, we would use a div element with the row class to clear the floating columns above. Here, we need a different solution, as we want this block of content to clear floats only within this specific breakpoint.

To accomplish this, we could write custom styles in our LESS files. But we can also use a Bootstrap responsive utility class to provide a targeted clearfix directly in the markup. Since we've already specified grid classes in our markup, let's use the second option in this context.

You can find the approach we'll use mentioned in Bootstrap's documentation at http://getbootstrap.com/css/#grid-responsive-resets. Following that method, we'll create a div element with the class clearfix, and add a Bootstrap responsive utility class to make it visible only on small screens. We'll place this new div element immediately prior to the About Us column:

<div class="clearfix visible-sm"></div>
<div class="about col-sm-12 col-md-6">

The clearfix class will force this element to clear the floats above it. The visible-sm class will allow this div to display only within our targeted breakpoint. At other breakpoints, it will be as if this div does not exist.

Save this, refresh your browser, and you should find that the About Us column now clears the floats above it and that the links are clickable.

Task complete. Now for a few finishing touches.

We have a few last touches we want to implement as we finish our footer. These include the following:

To accomplish these refinements, we'll write some custom styles. Let's tackle this in cascading fashion, starting with general rules for the footer and moving to the specific rules:

That's it. Save, compile, refresh, and enjoy! Here is our result in medium and wide viewports:

And here is the result for small viewports:

And this is for extra-small viewports:

Not bad! We have built a footer capable of managing a complex array of content across the full spectrum of extra-small, small, medium, and large viewports.