Bootstrap tabs with margins

Question

I have a web application and this is using Bootstrap tabs. See below for the image

I wanted to ensure that there is some whitespace/margin in between the tab and the text

 <div class="row">
    <div class="col-lg-12">
       <h2 class="page-header">More information</h2>
    </div>
    <div class="col-lg-12">
      <ul id="myTab" class="nav nav-tabs nav-justified">
        <li class="active "><a href="#tab-one" data-toggle="tab"><i class="fa fa-tree"></i>Images</a></li>
        <li class=""><a href="#tab-two" data-toggle="tab"><i class="fa fa-car"></i>Full Description</a></li>
        <li class=""><a href="#tab-three" data-toggle="tab"><i class="fa fa-car"></i>Details</a></li>
      </ul>

    <div id="myTabContent" class="tab-content margin-bottom">
      <div class="tab-pane fade active in" id="tab-one">
          <p>Here comes the pictures</p>
      </div>

      <div class="tab-pane fade" id="tab-two">
          <p>Here comes the large description</p>
      </div>
     .......
     .......

I have tried with defining the following in my CSS file:

.margin-bottom{
  margin-bottom: 1.25rem  !important ;
}

and then apply that style to the different classes of the first snippet, but can't get it to work. Any suggestions welcome!

Answer 1

You're trying to update the bottom margin of the content. You should be either adjust the top margin, or the bottom margin of the actual tabs. So either:

#myTabContent {
  margin-top: 1.25rem;
}

Or:

#myTab {
  margin-bottom: 1.25rem;
}

(Of course, modify the selectors as you see fit)

This is because margin-bottom is the space between the bottom of the current element and the one below it. Margin top would push the current element down a bit, margin-bottom would push the one below it, lower.