CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jfiggins
jfiggins

Reputation: 129

Why are my bootstrap nav tabs not aligning to the left?

I have the following bootstrap nav tabs:

<div class="container">
    <ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
        <li class="nav-item" id="projectDetailsTab">
            <a class="nav-link">Project Details</a>
        </li>
        <li class="nav-item" id="projectStatusTab">
            <a class=nav-link>Status</a>
        </li>
        <li class="nav-item" id="projectDocumentsTab">
            <a class=nav-link>Documents</a>
        </li>
    </ul>
</div>

I removed all of the href tags for brevity and to make it easier to read. My problem is that the tabs are displaying like this: nav-tabs issue
By default, the tabs should be on the left side of the page, correct? What is causing this issue?
My goal is to get the tabs to align to the left side of the page, something like this:nav-tabs correct

Upvotes: 1

Views: 675

Answers (2)

focus.style
focus.style

Reputation: 6750

As mister @Robert already wrote, the align left problem caused by .container div. Although lets write your code more correct. You misses .active class in first li a. And a href attribute you will need anyway. Minimal it should be href='#' for the correct work of Bootstrap tabs.

<div class="any-class-not-container">
  <ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
    <li class="nav-item" id="projectDetailsTab">
      <a class="nav-link active" href="#">Project Details</a>
    </li>
    <li class="nav-item" id="projectStatusTab">
      <a class="nav-link" href="#">Status</a>
    </li>
    <li class="nav-item" id="projectDocumentsTab">
      <a class="nav-link" href="#">Documents</a>
    </li>
  </ul>
</div>

More about Nav tabs in Bootstrap 4 you can read here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

Upvotes: 1

Robert
Robert

Reputation: 6967

Based on the code you've provided it would appear that your container is the problem. The container element applies a fixed width to everything within it, centering itself to the viewport.

The code that you have provided doesn't suggest that this component is required, but given that you've provided a minimal example you may expect unforeseen issues with its removal.

Upvotes: 1

Related Questions