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. 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.

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. 

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:

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

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.

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.

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:

Omit a

Set a fix width for your .container. E.g., .container {width: 1000px !important;}