Webucator Blog

Horizontal Buttons Using Bootstrap Grid Columns

In this article we will cover a simple strategy for creating a great looking 3-column layout with horizontal buttons using Bootstrap’s grid and responsive utility classes. Let’s dive in.

The Problem

First, let’s look at the problem we are trying to solve:

Problem: buttons do not align horizontally

The problem is that if we add buttons below our content they do not align horizontally. While this is not an issue if our content is a fixed height, this does become an issue when our template content can have variable height.

Let’s take a look at the code for this 3-column layout using Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit.
      </p>
      <a href="https://google.com" class="btn btn-primary btn-block text-center">Google</a>
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit. Choro interpretaris ea vel. Id sea impedit persequeris neglegentur, usu an dolorum molestie concludaturque. Commune perpetua te est, per legendos
        efficiendi neglegentur ut, id has brute tacimates accusamus.
      </p>
      <a href="https://youtube.com" class="btn btn-primary btn-block text-center">YouTube</a>
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit. Choro interpretaris ea vel. Id sea impedit persequeris neglegentur, usu an dolorum molestie concludaturque.
      </p>
      <a href="https://facebook.com" class="btn btn-primary btn-block text-center">Facebook</a>
    </div>
  </div>
</div>

Let’s quickly review:

  • First, I have a .container element that wraps the rows.
  • Next, I have a .row element that will have three column elements.
  • Each column will be 12 units wide when viewed on an extra-small (xs) device and 4 units wide when viewed on a small (sm) device that is at least 768 pixels wide. This break point is defined by Bootstrap. All rows have 12 units/columns.
  • Within each row I have a placeholder graphic, some variable amount of text in a paragraph and a call to action button. In this example I am just linking to the top 3 websites as ranked by Alexa as of December 2016.
  • The placeholder image has a class of .logo that I defined in order to give it some top and bottom margin to create white space in the design.
  • I also use the .btn class, along with the .btn-primary and .btn-block classes, to create a nice looking button. I add the .text-center to each button so that the button text is centered.

The Solution

The solution to this common problem is to either set a fixed height on the variable content or to use the responsive utilities that Bootstrap provides. Bootstrap provides classes to toggle the display of elements based on the device or browser width. We can use these classes to show a row of buttons immediately below the content when viewing on a mobile device and another row of horizontally aligned buttons when using a tablet or desktop device.

The two classes that we will be using are:

  1. .visible-xs-block – This will toggle the display of the buttons that are located immediate below the variable content in each column when using a mobile device.
  2. .hidden-xs – This will toggle the display of our additional row of buttons that will be horizontally aligned below the variable content when using a tablet or desktop device.

Here is what our solution will look like on both mobile and desktop devices:

The solution: buttons displayed below variable content on mobile device.

 

 

The solution: horizontally aligned buttons on tablet and desktop devices.

 

Now, let’s look at the code that makes this happen:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit.
      </p>
      <a href="https://google.com" class="visible-xs-block btn btn-primary btn-block text-center">Google</a>
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit. Choro interpretaris ea vel. Id sea impedit persequeris neglegentur, usu an dolorum molestie concludaturque. Commune perpetua te est, per legendos
        efficiendi neglegentur ut, id has brute tacimates accusamus.
      </p>
      <a href="https://youtube.com" class="visible-xs-block btn btn-primary btn-block text-center">YouTube</a>
    </div>
    <div class="col-xs-12 col-sm-4">
      <img src="https://placehold.it/200x100" class="logo center-block">
      <p>
        Lorem ipsum dolor sit amet, ex eam audire deleniti, vide libris inimicus mea id, eu nec quis doctus offendit. Choro interpretaris ea vel. Id sea impedit persequeris neglegentur, usu an dolorum molestie concludaturque.
      </p>
      <a href="https://facebook.com" class="visible-xs-block btn btn-primary btn-block text-center">Facebook</a>
    </div>
  </div>
  <div class="row hidden-xs">
     <div class="col-xs-12 col-sm-4">
       <a href="https://google.com" class="btn btn-primary btn-block text-center">Google</a>
     </div>
     <div class="col-xs-12 col-sm-4">
       <a href="https://youtube.com" class="btn btn-primary btn-block text-center">YouTube</a>
     </div>
     <div class="col-xs-12 col-sm-4">
       <a href="https://facebook.com" class="btn btn-primary btn-block text-center">Facebook</a>
     </div>
  </div>
</div>

The code is very similar to what we had before, with the addition of the .visible-xs-block class on each button below the variable content as well as the additional .row of buttons that are only displayed on tablet and desktop devices through the use of the .hidden-xs responsive utility class provided by Boostrap.

Here is a working solution using JsFiddle:

As you can see it is very easy to use Bootstrap’s grid framework along with their responsive utilities to create a great looking 3-column layout with horizontally aligned buttons.