title: Bootstrap tabs with margins
body: <p>I have a web application and this is using Bootstrap tabs. See below for the image
  <a href="https://i.stack.imgur.com/ccdWr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ccdWr.jpg" alt="enter image description here"></a></p>
  
  <p>I wanted to ensure that there is some whitespace/margin in between the tab and the text  </p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
         &lt;h2 class="page-header"&gt;More information&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;ul id="myTab" class="nav nav-tabs nav-justified"&gt;
          &lt;li class="active "&gt;&lt;a href="#tab-one" data-toggle="tab"&gt;&lt;i class="fa fa-tree"&gt;&lt;/i&gt;Images&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#tab-two" data-toggle="tab"&gt;&lt;i class="fa fa-car"&gt;&lt;/i&gt;Full Description&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#tab-three" data-toggle="tab"&gt;&lt;i class="fa fa-car"&gt;&lt;/i&gt;Details&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;div id="myTabContent" class="tab-content margin-bottom"&gt;
        &lt;div class="tab-pane fade active in" id="tab-one"&gt;
            &lt;p&gt;Here comes the pictures&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="tab-pane fade" id="tab-two"&gt;
            &lt;p&gt;Here comes the large description&lt;/p&gt;
        &lt;/div&gt;
       .......
       .......
  </code></pre>
  
  <p>I have tried with defining the following in my CSS file:</p>
  
  <pre><code>.margin-bottom{
    margin-bottom: 1.25rem  !important ;
  }
  </code></pre>
  
  <p>and then apply that style to the different classes of the first snippet, but can't get it to work. Any suggestions welcome!</p>