Solution 1 :

leftmost column is overflowing the content because of col-1 , you can use bootstrap media query (xs, sm, md, lg, xl) for dividing columns.

<div class="container">
  <div class="row">

   <!-- The leftmost column contain a vertical navigation bar -->
    <div class="col-md-3 col-4 mb-2 border-right">
      <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
        <a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
      </div>
    </div>
    
    <!-- Columns in the middle change depending on selected pill-->
    <div class="col-md-6 col-8">
      <div class="tab-content mt-2">
        <div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
          Some plot.
        </div>
        <div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
          Some properties.
        </div>
      </div>
    </div>
    
    <!-- Rightmost 3 columns are a button area -->
    <div class="col-md-3">
      <div class="row p-3 pull-right">
        <button class="btn btn-primary">
          A button
        </button>
      </div>
    </div>
  </div>
</div>

Problem :

I’m using bootstrap 4 in a web application for organizing topography measurements.

On one page, a plot of such a topography is shown in an <div class='tab-content'> element.
There are two navigation pills, “Plot” and “Properties”, which allow to select the tab contents.

Here is a simplified version of the original markup:

  <div class="container">
   <div class="row">

    <!-- The leftmost column contain a vertical navigation bar -->
    <div class="col-md-1 mb-2 border-right">
      <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" data-toggle="tab" href="#plot" role="tab">Plot</a>
        <a class="nav-link" data-toggle="tab" href="#properties" role="tab">Properties</a>
      </div>
    </div>

    <!-- Columns in the middle change depending on selected pill-->
    <div class="col-8">
      <div class="tab-content mt-2">
        <div class="tab-pane fade active show" id="plot" role="tabpanel" aria-labelledby="plot-tab">
          Some plot.
        </div>
        <div class="tab-pane fade" id="properties" role="tabpanel" aria-labelledby="properties-tab">
          Some properties.
        </div>
      </div>
    </div>

    <!-- Rightmost 3 columns are a button area -->
    <div class="col-3">
      <div class="row p-3 pull-right">
        <button class="btn btn-primary">
          A button
        </button>
      </div>
    </div>
  </div>

And here is a fiddle, where you can see it in action.

The pills work, but my problem is that sometimes in my application (depending on the zoom level of my page) and also in the fiddle, the blue background of the selected pill overlaps with the border and with the tab contents:

Pill overlaps with tab contents.

Could someone give me a hint how to prevent the pills from overlapping, e.g. by CSS?
I would like to have the pills completely on the left of the vertical border.

Comments

Comment posted by mcrot

Thank you! I simply haven’t expected “col-1” too be to small here. I’ve taken this as opportunity to understand responsive columns better.

By

Leave a Reply

Your email address will not be published. Required fields are marked *