CODEWITHSUNDEEP
twitter-bootstrap
K.Doe
K.Doe

Reputation: 59

How do you add custom styling to a tab when it's active in Bootstrap 4?

I have these list items. When the active tab changes to Page_1, I'd like the <li> to have border-bottom: solid 1px #000; as opposed to Bootstrap's own styling/

<ul class="nav nav-tabs">

    <li><a data-toggle="tab" href="#Home" role="tabpanel" class="nav- 
    link active">Home</a>
    </li>

    <li><a data-toggle="tab" href="#Page_1" role="tabpanel" class="nav- 
    link">Page 1</a>
    </li>

</ul>

Upvotes: 3

Views: 9055

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Select the bootstrap item you want to override, then make sure you make your own bootstrap class in your style file that loads after the bootstrap css file loads. Click on a tab to highlight it as active, note the order of bootstrap, then custom styles:

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background: moccasin;
  border-bottom: 2px solid green;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background: moccasin;
  border-bottom: 2px solid green;
}
</style>
<link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
    <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
  </body>
</html>

Upvotes: 10

Related Questions