Bootstrap Grid

How to make columns same height

This is a classical problem. You have content boxes with different content but you want them to have the same height. A solution to this problem will be a smart usage of flexbox on the Bootstrap rows.

This approach consists of these steps:

1. Create a .row-flex and apply it to your content boxes' parent row.
2. Columns in the .row-flex row will have same height now.
3. I usually do not mix Bootstrap with my components and I have all the backgrounds, padding, etc. of the content boxes declared in its child element - .content. To make everything work, all you need to do is just to set a height: 100% to the .content boxes.

/* display this row with flex and use wrap (= respect columns' widths) */

.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}


/* vertical spacing between columns */

[class*="col-"] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
  padding: 20px 20px 10px;
  color: #fff;
}

How to add vertical spacing to columns

To add some vertical spacing to your columns easily, use the following simple CSS rule that gives bottom margin of 30px to every Bootstrap column. 

/* vertical spacing between columns */

[class*="col-"] {
  margin-bottom: 30px;
}

How to use your own classes instead of columns and rows

Many people simply do not like the Bootstrap way of writing the code with columns and rows such as:

<div class="row">
  <div class="col-sm-8 col-lg-9">
    <p>Main content</p>
  </div>
  <div class="col-sm-4 col-lg-3">
    <p>Right column</p>
  </div>
</div>

But you can easily write your code like in the next example.

<div class="content">
  <div class="main">
    <p>Main content</p>
  </div>
  <div class="right-column">
    <p>Right column</p>
  </div>
</div>

To achieve it, you will need to use Bootstrap {LESS} .make-row() and .make-*-column() mixins.

.content {
  .make-row();
}

.main {
  .make-sm-column(8);
  .make-lg-column(9);  
}

.right-column {
  .make-sm-column(4);
  .make-lg-column(3);
}

More about the grid mixins in the Bootstrap official docs.

How to change ordering of columns on mobile

A quite useful feature of the Bootstrap grid is an ability to order columns differently on mobile devices and differently on desktops. 

All you need to do is to use .col-(breakpoint)-push-(number) and .col-(breakpoint)-pull-(number) classes to push or pull the columns on the specified breakpoint out of its original place.

I know it sounds a bit complicated and usually, it takes me some time to visualise the outcome but let's have a look at it in an example. In the following code, the first column will appear as a first item on mobiles but as a second item on tablets and desktops.

In the following code, the first column will appear as a first item on mobiles but as a second item on tablets and desktops.

<div class="row">
    <div class="col-sm-4 col-sm-push-8 ">
      <div class="content colour-1">4 cols wide right column appears second on SM+ devices<br>but appears first on mobile
      </div>
    </div>
    <div class="col-sm-8 col-sm-pull-4">
      <div class="content colour-2">8 cols wide left column appears first on SM+ devices<br>but appears second on mobile
      </div>
    </div>
</div>

How to show or hide elements on mobile

If you need to quickly and easily hide an element only on xs devices, there is a .hidden-xs class that you can use. 

Similarly, you can use a .hidden-(breakpoint) class for the rest of the breakpoints too and combine them together, i.e. use classes .hidden-lg, .hidden-md, .hidden-sm.

On the other hand, if you want to show an element only on certain devices, you can use .visible-(breakpoint)-(display) classes. Note a slight difference there - you have to use a display property there too. Possible values for the (display) part of the class name are block, inline-block and inline. So, if you need to display an element as a block on large devices, just add a .visible-lg-block class to it.

To read more about this, consult the official documentation.

How to disable responsiveness

There can be situations when you would prefer your page to behave as a non-responsive. These could be when preparing your web page for print or generating output for PDF.

Basic steps to disable responsiveness:

1. Omit a <meta name="viewport" ...>
2. Set a fix width for your .container. E.g., .container {width: 1000px !important;}

If more info needed on this, check out the official documentation.

Components - navbar, footer

How to open a navbar dropdown on hover

The standard behaviour of Bootstrap dropdowns is that they open on click. It has its pros and cons and I usually keep it as default. If you would like to open dropdowns on hover, it is not a complicated process to achieve it.

We will need to change two things and we will apply our changes only if the viewport's wider than 768px (i.e. navbar is not collapsed).

First, add this CSS rule to your stylesheet after loading the Bootstrap's CSS. It is quite straightforward - if the viewport's wider than 768px and you hover above a .dropdown link, a .dropdown-menu opens.

@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

Second, if the parent link should point to an URL too, we will need  to add a bit of JS code to change the .dropdown links' onclick behaviour. 

$('.dropdown-toggle').click(function(e) {
  if ($(document).width() > 768) {
    e.preventDefault();

    var url = $(this).attr('href');

    if (url !== '#') {
      window.location.href = url;
    }

  }
});

See it live or experiment if you like on Codepen.

How to change navbar height

When you want to change the navbar height, you will need to adjust more things than simply adding a new height value for .navbar. 

In the following code, I outline an approach on how to change your navbar's height to 80px. You can find more info on this topic in my Bootstrap navbar tutorial.

.navbar {
  min-height: 80px;
}

.navbar-brand {
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

How to create a sticky footer

Create a sticky footer for your website following these steps:

1. Create a footer element and set its position to absolute with bottom offset 0. Set a fixed height for it. (In my example, it will be 80px).
2. Add bottom padding to your <body> element, set it to the same value as the footer's height.

body {
  height: 100%;
  padding-bottom: 80px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: #fafafa;
  border-top: solid 1px #eee;
}

/* additional demo styles */
.footer p {
  margin-top: 30px;
}

.article {
  padding-top: 40px;
}

Have a look at a result or experiment with your own content in this Codepen.

Buttons and forms

How to create custom Bootstrap buttons

Bootstrap comes with some 5 default button styles - default, primary, success, danger, etc.

When you need to change a general button feeling, as to decrease its border-radius or padding, the best way is to overwrite the .btn class.

Other than that, I would suggest to create a new button type and extend the common Bootstrap button style.

As an example, let's create an outline button and a dark blue button.

1. I will create 2 new classes: .btn-outline and .btn-colour-1. These classes will extend the default .btn styling.
2. In CSS, I will style their default state and also :active, :focus, :hover and .active (all these share the same style)
3. When done, I will be ready to use a new button, e.g. <a class="btn btn-outline">New button</a>

How to disable buttons and other form elements

You can easily disable buttons and inputs in your form. When disabled, the buttons will look lighter and will have a not-allowed cursor on hover.

For disabling radios and checkboxes:

• add disabled class to a parent .checkbox or .radio element
• add disabled attribute to the input

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
     This checkbox is disabled
  </label>
</div>

<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
     This radio is disabled
  </label>
</div>

For disabling buttons

• add disabled attribute to <button> buttons
• or add .disabled class to <a> buttons

<button type="button" class="btn btn-primary" disabled="disabled">Disabled button</button>
<a href="#" class="btn btn-primary disabled" role="button">Disabled link button</a>

Typography and layout tips

How to center a block element

To easily horizontally center a block element, just add center-block class to it, as in <div class="center-block"></div>.

This class adds the following CSS styles to your element:

// Class .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Also, there is a possibility to use in LESS as a mixin .element {
  .center-block();
}

How to center an inline content

If you need quickly center inline content or inline-block elements inside a div, add .text-center class to the parent element. 

Let's quickly horizontally centre text and button with the following code:

<p class="text-center">
  This will be horizontally aligned to the center.
</p>
<p class="text-center">
  <a class="btn btn-primary">This button will be centered too.</a>
</p>

How to use heading classes 

You often face a problem when you need to have a visually small heading but it should be h2. To mimic the appearance of h4, just add .h4 to your h2. See more in the following example:

See more in the following example:

<h2 class="h4">
  This heading will look like h4 but it is h2.
</h2>  

How to responsively embed YouTube or Vimeo videos

You can easily embed YouTube or Vimeo videos using Bootstrap's embed-responsive helper classes.

Choose from embed-responsive-16by9 or embed-responsive-4by3 based on your video aspect ration.

<div class="row">
  <div class="col-sm-6">
    <!-- 16:9 -->
    <h4>16:9 Aspect Ratio</h4>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zB4I68XVPzQ"></iframe>
    </div>
  </div>
  <div class="col-sm-6">
    <!-- 4:3 -->
    <h4>4:3 Aspect Ratio</h4>
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zB4I68XVPzQ"></iframe>
    </div>
  </div>
</div>