CODEWITHSUNDEEP
bootstrap-4
Mark__C
Mark__C

Reputation: 825

set Bootstrap 4 nav-tabs to the same height

How can I ensure that Bootstrap 4 nav-tabs all fill the same height when the text wraps?

.my-card-header-tabs .nav-link{
    color: #6A4E6A;
    background-color: #DBEAE7;
}

.my-card-header-tabs .nav-link.active{
  background-color: #6A4E6A;
  color: #fff;
  border-bottom-color: #6A4E6A;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="card mb-5">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs my-card-header-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 1 - long text</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="">Short link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 3 - long text</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 4 - long text</a>
      </li>
    </ul>
   </div>
</div>
</container>

In the image below, the nav-tab needs to fill the entire height i.e. including the space highlighted in orange.

enter image description here

Upvotes: 0

Views: 824

Answers (1)

Aleksandr Belugin
Aleksandr Belugin

Reputation: 2227

First replace </container> with </div>

To stretch links you could make

.nav-item {
  display: flex;
}

.nav-link {
  flex-grow: 1;
}

To make links content center you could wrap content with <span> and style like

.nav-link {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

All in all in snippet.

.my-card-header-tabs .nav-link {
  color: #6A4E6A;
  background-color: #DBEAE7;
  
  /* added */
  flex-grow: 1;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.my-card-header-tabs .nav-link.active {
  background-color: #6A4E6A;
  color: #fff;
  border-bottom-color: #6A4E6A;
}

.my-card-header-tabs .nav-item {
  display: flex;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="card mb-5">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs my-card-header-tabs nav-justified">
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 1 - long text</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href=""><span>Short link 2</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 3 - long text</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 4 - long text</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions