Bootstrap Nav Pills content width

Question

I am using Bootstrap pills with two tabs. I want the container for tab content to have a different width. I don't know how to do that. tab-content sets both width. I need tab1 container to be 600px wide, and tab2 to be 800px.

<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>Same as example 1 but we have now styled the tab's corner</h3>
                </div>
                <div class="tab-pane" id="tab2">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</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);
  
}

Any suggestions?

Answer 1

"I need tab1 container to be 600px wide, and tab2 to be 800px."

Both tabs share one tab-content container. But since each tab has it's own tab-pane you could change the width of that.

.tab-pane {
    padding: 5px 15px;
    box-shadow: 0 2rem 2rem #00000080;
    position: relative;
    border-radius: 0px 0px 8px 8px;
    border-top: 3px solid #F5A000;
    background-color: rgba(255, 255, 255, 0.5);
}

#tab1 {
    width: 600px;    
}

#tab2 {
    width: 800px;    
}

https://codeply.com/p/DrJOw7Pf78

EDIT: centering is a separate question.. just use flexbox on the tab-content:

<div class="tab-content clearfix d-flex justify-content-center">..</div>