Best Practices

8 Tips For Bootstrap


In this post, I’m going to give you some quick tips while you work with bootstrap.

I was not sure what kind of tips could be useful for you so I tried to answer some of the most requested, so if you want to ask about something else don’t hesitate and ask in the comments below or even better if you come up with more useful tips that would be awesome.

1. Center columns horizontal: Display inline-block

  • Columns by default has float: left; but to center our columns we need to override that style with float: none;.
  • The next step is center our items, we can do that adding a .text-center to our container.
  • To make it work our items will need a display: inline-block;
  • There is just a detail, if you have 12 columns the line will break (example), in order to fix this we need to make a small hack, just set the font of the container to 0, and inside the items return the right font size.
CSS
.fl-no { float: none; }
.dis-ib { display: inline-block; }
.font0 { font-size: 0; }
.font14 { font-size: 14px; }
HTML
<div class="container-fluid font0">
  <div class="col-xs-4 fl-no dis-ib font14">
     Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
     Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
     Column 4, float none, display inline block
  </div>
  <div class="col-xs-4 fl-no dis-ib font14">
     Column 4, float none, display inline block
  </div>
</div>

Example: jsfiddle

Center columns

2. Center columns vertical: Vertical align middle

  • We need to remove the float: left
  • Also we will set the display: inline-block;
  • To align vertically this time we will include the vertical-align: middle;
  • Similar to the first tip, we need a small hack to make our 12 columns align correctly (example with broken line), setting the container to font-size: 0 and giving back the right size in the items will do the trick.
CSS
.center-vertical {
  display: inline-block;
  float: none;
  vertical-align: middle;
}
.font0 { font-size: 0; }
.font14 { font-size: 14px; }
HTML
<div class="container-fluid">
  <div class="row font0">
    <div class="col-xs-4 center-vertical font14">
      Content
    </div>
    <div class="col-xs-4 center-vertical font14">
      Content
    </div>
    <div class="col-xs-4 center-vertical font14">
      Content
    </div>
  </div>
</div>

Example: jsfiddle

Tip 2 image

3. Center columns vertical: Flex

  • To use flex we need to set our container to use it with display: flex;
  • Once done that we need to set how our items will be aligned with align-items: center;
  • To allow our container to have multiple lines of content we set the flex-wrap: wrap;
CSS
.vertical-align {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
HTML
<div class="container-fluid">
  <div class="row vertical-align">
    <div class="col-xs-4">
      Content
    </div>
    <div class="col-xs-4">
      Content
    </div>
    <div class="col-xs-4">
      Content
    </div>
  </div>
</div>

Example: jsfiddle

Tip 3 image

3. Make columns same height: Flex

  • Our container or row must have a display: flex; and flex: wrap;
  • Our columns should have the display: flex; and flex-direction: column;
  • Check the example for full cross browser support.
CSS
.dis-fl {
  display: flex;
  flex-wrap: wrap;
}

.col-flex {
  display: flex;
  flex-direction: column;
}
HTML
<div class="container-fluid">
  <div class="row vertical-align">
    <div class="col-xs-4">
      Content
    </div>
    <div class="col-xs-4">
      Content
    </div>
    <div class="col-xs-4">
      Content
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row dis-fl">
    <div class="col-xs-4 col-flex">
      <p>Column</p><p>with two paragraph</p>
    </div>
    <div class="col-xs-4 col-flex">
      <p>Column 4</p>
    </div>
    <div class="col-xs-4 col-flex">
      <p>Column 4</p>
    </div>
    <div class="col-xs-4 col-flex">
      <p>Column 4</p>
    </div>
    <div class="col-xs-4 col-flex">
      <p>Column</p><p>with two paragraph</p>
    </div>
  </div>
</div>

Example: jsfiddle

Tip 4 Image

4. Align buttons and inputs

There are multiple options to align buttons and inputs, you can check the defaults for bootstrap in its documentation.
But if you want to achieve this in a more classic way, you can make it like this:

CSS
.input-container-inline {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle; 
}
HTML
div class="container-fluid">
<div class="form-group input-container-inline">
  <input class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>

Example: jsfiddle

Tip 4 Image

5. Center responsive images

This was one of the most common questions, and it’s a bit weird because this is included in the documentation.
But to achieve that you can use the center-block class.

HTML
<div class="container-fluid">
    <img src="https://placehold.it/100x100" class="image-responsive center-block"/>
</div>

Example: jsfiddle

Tip 5 Image

6. Five columns

Instead of having bootstrap with a different amount of columns we are going to extend the functionality of bootstrap.
Using the same concept of columns we are going to create our column of width: 20%;
This column will work exactly as any bootstrap column.

CSS
.col20-xs, .col20-sm, .col20-md, .col20-lg { 
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}

.col20-xs { width: 20%; }

@media (min-width: 768px) {
  .col20-sm { width: 20%; }  
}

@media (min-width: 992px) {
  .col20-md { width: 20%; }
}

@media (min-width: 1200px) {
  .col20-lg { width: 20%; }
}
HTML
<div class="container-fluid">
  <div class="row">
    <div class="col20-xs">Column 20%</div>
    <div class="col20-xs">Column 20%</div>
    <div class="col20-xs">Column 20%</div>
    <div class="col20-xs">Column 20%</div>
    <div class="col20-xs">Column 20%</div>
  </div>
</div>

Example: jsfiddle

Tip 6 Image

As this column works exactly as the others you can combine them, for example, in large screens, you can have a 5 columns row, and for mobile, you can change it for a 1 column row (example).

Large screens view (XS >)
Tip 6 example 1

Small screens view (XS)
Tip 6 example 2

7. Dropdown on hover

By default Bootstrap doesn’t open dropdowns on hover and respecting that our solution will not apply to all dropdowns, it will only apply to the dropdowns you select.

  • You need a container for your dropdown (we called it .dropdown-on-hover)
  • It changes the display property of the menu when you hover the element (with CSS)
  • As the dropdown and menu have a small separation (2px) when you try to select an item the menu disappear, to avoid that we include a padding in our container, so the hover is not lost.
CSS
.dropdown-on-hover {
  padding-bottom: 2px;
}

.dropdown-on-hover:hover .dropdown-menu {
  display: block;
}
HTML
<div class="container-fluid">

<div class="dropdown-on-hover">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
    </ul>
  </div>
</div>

Example: jsfiddle

Tip 7 Image

8. Change column order depending on screens

Let’s use an example for this, there are times when the design for desktop displays our text on the right and the image on the left, but for mobile that image will be on top and our text below.

The problem with this is the way columns work, having an order like that for desktop will make the image display below our text on mobile.

Solution: Using the float, in our advantage we just need to invert the float for mobile screens making

CSS
@media (min-width: 768px) {
 .pull-right-sm { float: right; } 
}
HTML
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-4 pull-right-sm">
      <img class="center-block" src="https://placehold.it/100x100" />
    </div>
    <div class="col-xs-12 col-sm-8 pull-right-sm">
      Content text, this text should be left of the iamge on desktop and below in mobile.
    </div>
  </div>
</div>

Example: jsfiddle

Large screens view (SM >)
Tip 8 example large

Small screens view (XS)
Tip 8 example small

NOTE:

Some of those problems have even more solutions than the ones we used here if you have questions, more tips or improved version of this let us know in the comments below.

Best Practices
De Código, Café y Cervezas – Clean Code
AEM
Responsive layouting in AEM
Community
The Rubber Duck Effect