CODEWITHSUNDEEP
javascripthtmlcssbootstrap-5
Alex
Alex

Reputation: 272

Customizing navtabs in bootstrap

I am trying to make a custom bootstrap navbar tabs, but I am having trouble removing the borders and adding the custom coloring. I figured out how to remove part of the borders doing:

.nav-tabs, .nav-pills {
    text-align: center;
    border: none;
}

.nav-tabs > li > a, .nav-tabs > li.active > a {
    border-radius: 0;
}

Here is what I have so far: enter image description here

And this is what I am trying to get to:

enter image description here

<div class="row justify-content-center">
                        <div class="col-7">
                            <ul class="nav nav-tabs nav-justified mb-4" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button style="text-align:right; font-family: 'Remora', sans-serif; padding-right: 30px;" class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button style="text-align:left; font-family: 'Remora', sans-serif; padding-left: 30px;" class="nav-link" id="CGM-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
                                </li>
                            </ul>
                        </div>
                    </div>

Upvotes: 2

Views: 518

Answers (1)

Stephen M Irving
Stephen M Irving

Reputation: 1512

First you need to get rid of nav-justified and mb-4 classes from your ul.nav element because that is going to set the nav to flex-grow: 1 and put margin below your buttons, which makes your buttons stretched out to fill the space and puts the buttons at the top of the bar with space below them. Based on your example image, this isn't what you want. I'm also taking out the inline CSS from your HTML, you should almost always avoid that especially if you need to repeat the same CSS on multiple elements. Keep your CSS with your CSS. I've also added a class to the div.col-7 element named .nav-wrapper. This is so I can apply styling to it without adding that styling to any other place you may use the .col-7 class in your project.

<div class="row justify-content-center">
  <div class="nav-wrapper col-7">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="CGM-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
      </li>
    </ul>
  </div>
</div>

Here is the CSS I wrote to get it close to your example image. Had to use some selectors that are more specific than generally necessary, in order to have a higher specificity score than some of the bootstrap CSS w/o using !important. I removed the sans-serif fallback for the 'Remora' font because bootstrap will have an entire font-family fallback stack in the body so if Remora isn't found, or before it is loaded, the font-family will be set according to that stack (which also has sans-serif in it). I took the liberty of adding a :hover state for the buttons. This just adds the blue border line above it and changes the background-color to white, just like the .active button, but without changing the text-color.

.nav-wrapper {
  background-color: #f1f1f1; 
}

.nav-wrapper > .nav {
  display: flex;
  justify-content: center;
  border: 0;
  margin-top: 1rem;
}

.nav-item > .nav-link {
  border: 0;
  color: #555;
  font-family: 'Remora';
  font-weight: 700;
}

.nav-item > .nav-link:hover,
.nav-item > .nav-link.active {
  background-color: #fff;
  border-color: #0a58ca;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-radius: 0;
}

.nav-item > .nav-link.active {
  color: #0a58ca;
}

Since this uses bootstrap and you can't display the result natively here on SO, here is the CodePen where you can view the example and play around with code to customize it.

Here is a screenshot of the finished product in the default state: enter image description here

Let me know if you have any questions.

Upvotes: 1

Related Questions