CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
necrofish666
necrofish666

Reputation: 75

How do I get rid of the small gap beneath my bootstrap tabs?

I'm trying to create a navbar using bootstrap, but I can't seem to get rid of the small space beneath each tab. Can anyone help?

tabs image

Code:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Baseline Assessment</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav nav-pills nav-justified" role="tablist">
            <li class="active"><a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">Step 1: Verification</a></li>
            <li><a href="#parqPanel" aria-controls="parqPanel" role="tab" data-toggle="tab">Step 2: Par-Q</a></li>
            <li><a href="#exercisePanel" aria-controls="exercisePanel" role="tab" data-toggle="tab">Step 3: Exercise History</a></li>
            <li><a href="#decisionPanel" aria-controls="decisionPanel" role="tab" data-toggle="tab">Step 4: Decision</a></li>
        </ul>
    </div>
</nav>

Thanks.

Upvotes: 0

Views: 116

Answers (1)

Rion Williams
Rion Williams

Reputation: 76607

Apply Padding Adjustments

Try making the padding large enough to match your navbar-brand element which is explicitly making the menu larger due to it's height of 50px :

.nav>li>a {
    position: relative;
    display: block;
    /* Adjusting this from 10px 15px to 15px should push the rows down */
    padding: 15px;
}

You can see an example of what this change looks like below :

enter image description here

Consider Responsive Utility Classes

You might also consider performing some type of truncation of the content of your menu items as well, as smaller resolutions will result in a "wrapping" effect. Bootstrap's available responsive utility classes can help mitigate this issue :

<ul class="nav nav-pills nav-justified" role="tablist">
    <li class="active">
      <a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">
        <span class='hidden-sm'>Step 1: Verification</span>
        <span class='visible-sm'>Verification</span>
      </a>
    </li>
    <!-- Do this for each <li> element -->
</ul>

You can see this in action here and demonstrated below :

enter image description here

Upvotes: 1

Related Questions