CODEWITHSUNDEEP
cssbootstrap-4tabs
Pruthvi Raj
Pruthvi Raj

Reputation: 413

CSS to change the default look of Bootstrap 4 Nav-tabs

I have created Bootstrap 4 Nav-tabs as below :

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">SavedAssets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
      aria-selected="false">SubmittedAssets</a>
  </li>
</ul>

I want to change the default look of nav-tabs to be like the below image : Tabs image

By default, the first tab should be highlighted with a blue line and after clicking on the second tab, the blue line will be moved from the first tab to the second.

Could you please help on writing css for this? Thanks

Upvotes: 0

Views: 4491

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19542

Add like that, you can got exact result you want and with less use of !important

Snippet CSS and below CSS doing same thing but below CSS is the simple and less code 

.nav-tabs .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
    color: gray;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border-radius: 0;
    border-bottom: 2px solid blue;
}


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
.nav-tabs .nav-link {
    color: gray;
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid blue;
}
</style>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
        aria-selected="true">SavedAssets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
        aria-selected="false">SubmittedAssets</a>
    </li>
</ul>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 3

user11609596
user11609596

Reputation:

In your own css file, just override the bootstrap stylings. Example:

.nav-link {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid grey !important;
  border-color: none !important;
}

.nav-link.active {
  border-bottom: 2px solid blue !important;
  color: #000000 !important;
}

Upvotes: 1

Related Questions