I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width for both tabs. Specifically, I want the container for tab1 to be 600px wide and tab2 to be 800px wide.
<div class="container">
<ul class="nav nav-pills justify-content-center">
<li class="active">
<a href="#tab1" data-toggle="tab">First Tab</a>
</li>
<li><a href="#tab2" data-toggle="tab">Second Tab</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="tab1" >
<h3>Similar to example 1, but with customized tab corners</h3>
</div>
<div class="tab-pane" id="tab2">
<h3>Using the nav-pills class instead of nav-tabs for automatic tab background color</h3>
</div>
</div>
</div>
Css:
.nav-pills > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-pills {
text-align:center;
}
.nav-pills > li > a {
border-radius: 6px 6px 0 0 ;
background-color: #FFF;
color: black;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 7px 50px;
text-decoration: none;
margin-right: 20px;
}
.nav-pills > li.active > a {
background-color: #F5A000;
}
.tab-content {
margin-top: 4px;
padding : 5px 15px;
box-shadow: 0 2rem 2rem #00000080;
height:90px;
position: relative;
border-radius:0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
Does anyone have any suggestions on how to achieve this customization?