Editor's note: This is a guest post sent by one of our visitors. You can find the author bio followed by the post content. 

Over the past several years Bootstrap, a frontend toolkit for quickly and easily developing web applications, has been taking the online world by storm, becoming a favorite tool among webmasters and developers alike. 

However, despite the tools’ robust and diverse capabilities, most developers grossly underestimate what can be accomplished while using Bootstrap. To help remedy this situation, we’ve put together this short article detailing the 7 advanced bootstrap techniques you need to know (but probably don’t) in order to design the most beautiful and functional website possible. 

Let’s dive in.

Tip #1: Set the Nav Bar to Open By Hovering

The majority of the websites on the internet allow users to open up a nav bar simply by hovering their mouse over it. Unfortunately, Bootstrap’s standard behavior is to open dropdown menus on click. 

While some people prefer this default setting, many more don’t. Luckily, if you want your dropdowns to open on hover, it’s a relatively simple and straightforward process. 

Only two things will need to be changed in order to achieve this goal.

First, add the following CSS rule to your stylesheet after loading Bootstrap’s CSS.  

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

Quite simply, if someone is viewing your website on a device that is wider than 768px, and they hover above a dropdown link, then the dropdown menu opens. 

Easy, right? 

Next, we need to add a quick line of JS code to change the dropdown links “On Click” behavior.  

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

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

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


Tip #2: Set Responsive Video Embeds to Maintain Aspect Ratio 

There are few greater user experience sins than embedding a video that does not maintain proper aspect ratio. I’ve personally exited out of countless, otherwise high quality, websites for this reason alone. 

Luckily, ever since Bootstrap 3.2 was released, embedding responsive iframes that maintain proper aspect ratio is easier than ever before. 

Simply add the following code to your markup. 

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>

Tip #3: Hide Elements on Mobile 

If you aren’t aware, Google is in the process of rolling out something known as a “Mobile First Index”. Basically, what this means is that they are beginning to base a site’s search engine ranking first and foremost on its mobile design.

Because of this, it’s become more important than ever before that webmasters understand how to create stunning mobile responsive designs. While it might not be as straightforward as using a standard site builder, Bootstrap’s robust coding options make this task relatively easy (if you know what you’re doing). 

If you need to quickly hide an element only on an xs device, you can use the .hidden-xs class.

In a similar fashion, you can use the .hidden-(breakpoint) class for the rest of the breakpoints and use .hidden-lg, .hidden-md, and .hidden-sm.

Tip #4: Extend Existing Classes… Don’t Override

I’ve read plenty of guides on Bootstrap that encourage developers to override Bootstrap styles in order to customize buttons and other features. While this tactic technically works, in our experience, this can cause things to become much messier than necessary very quickly.

Instead, we recommend that you simply extend existing classes to maintain the integrity and simplicity of your code.

For example, here’s the code that you would use to create a flat yellow button. 

.btn-yellow {
  background: rgb(250, 255, 140);
  color: #574500;
  border: none;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
 /* !important tags aren't necessarily always bad */
.btn-yellow:hover, .btn-yellow:focus {
  background: rgb(252, 255, 179);
.btn-yellow:active {
  background: rgb(247, 255, 71);

Tip #5: How to Set Columns to the Same Height

Nothing is more frustrating than creating several columns of high quality content only to find out that, upon publishing, that the columns are completely unaligned and look like something out of a Picasso museum. Luckily, this rather pervasive issue has a relatively easy fix.

All you need to do is create a .row-flex and apply it to your content boxes’ parent row. This will ensure that all columns in the .row-flex will have the same height. Just make sure that all components of the content boxes are declared in its child element .content and set height: 100%.

Here’s an example of the code you would use. 

/* 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;

I hope that the above 5 tips have added a few new tools to your Bootstrap belt and will allow you to create incredible websites with ease. If you have any difficulties understanding the article or the tactics we’ve mentioned, be sure to leave a comment below and we’ll do our best to help!  

Author Bio: Sam Bocetta is a freelance journalist specializing in U.S. national cyber defense, with emphases on emerging technology trends in information security, cryptography, and cyberwarfare.