Html Question posted in
Some basic documentation can be found here.

Html – Toggle between content

I have the following Bootstrap version 4.1.1 page. I would like to change the background color of active toggle to white.

.nav-tabs {
  margin-top: 3%;
  border: none;
  background: #0062cc;
  border-radius: 1.5rem;
  width: 28%;
  float: right;
}

.nav-tabs .nav-link {
  padding: 2%;
  height: 34px;
  font-weight: 600;
  color: #fff;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.nav-tabs .nav-link:hover {
  border: none;
}

.nav-tabs .nav-link.active {
  width: 100px;
  color: #d8dfe6;
  border: 2px solid #0062cc;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<div class="col-md-9 register-right">
  <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
    </li>
  </ul>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you all for your answers here what I found.

    Here what i did.

    create a class named tab in both list items and set one active.

     <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link " class="tab active" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " class="tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
            </li>
        </ul>

    use the following css to switch between

    .active, .tab:hover 
    {
        background-color: white;
        color: black;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1rem;
        border-bottom-left-radius: 1.5rem;
    }

    entire code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</head>
<body>
<style>
    


.nav-tabs{
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: auto;
    float: right;
}
.nav-tabs .nav-link{
    padding: 2%;
    height: 34px;
    font-weight: 600;
    color: #fff;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.nav-tabs .nav-link:hover{
    border: none;
}
.nav-tabs .nav-link{
    width: 100px;
    color: rgb(240, 237, 237);
    border: 2px solid #0062cc;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}
.active, .tab:hover 
{
    background-color: white;
    color: black;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1.5rem;
}
  
</style>              
<div class="col-md-9 register-right">
    <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link " class="tab active" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " class="tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
        </li>
    </ul>
                       
</div>
</body>
</html>

    .


  2. 0

    Does the following solve your problem?

    .nav-tabs {
  margin-top: 3%;
  border: none;
  background: #0062cc;
  border-radius: 1.5rem;
  width: 28%;
  float: right;
}

.nav-tabs .nav-link {
  padding: 2%;
  height: 34px;
  font-weight: 600;
  color: #fff;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.nav-tabs .nav-link:hover {
  border: none;
}

.nav-tabs .nav-item.active .nav-link {
  width: 100px;
  background: white;
  border: 2px solid #0062cc;
  color: #0062cc;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.coam/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-9 register-right">
  <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link " id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search