0

I'm working with Bootstrap 4.1.3 and noticed some unexpected padding on the left of all but the first tab in a container.

For demonstration purposes, I set the background of the tab container green, inactive tabs white, borders to blue, and the active tab red. I'm expecting to see zero green - yet, in the example below, you can see it coming through (from the tab container background underneath) on both the second and third tabs.

Example:

Screenshot of Unexpected Padding

I tried using the Chrome Inspector to see if there are extra styles computed (e.g. margin or padding) on the non-first tab elements, but there are none.

Why is this happening?

.tabs {
  display: inline-block;
  border: 1px solid #ECECEC;
  border-radius: 6px;
  margin-bottom: 1.85714286em;
  background-color: green;
  padding: 0;
}

.tabs li:not(.active) {
  background-color: #fff !important; 
  opacity: 1;
}

.tabs li.active {
  background-color: red; 
}

.tabs > li {
  display: inline-block;
  opacity: .5;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tabs > .active,
.tabs:hover {
  opacity: 1;
}

.tabs-container.tabs--vertical .tabs li:not(:last-child) {
  border-right: none;
  border-bottom: 1px solid #ECECEC;
}

.tabs li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  padding: 0.92857143em 1.85714286em;
}
.tabs li:not(:last-child) {
  border-right: 1px solid blue;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-10">
      <div class="tabs-container" data-content-align="left">
        <ul class="tabs">
          <li>
            <div class="tab__title">
              <span class="h5">Code Quality</span>
            </div>

          </li>
          <li class="active">
            <div class="tab__title">
              <span class="h5">Visual Design</span>
            </div>

          </li>
          <li>
            <div class="tab__title">
              <span class="h5">Stack Experience</span>
            </div>

          </li>
        </ul>
       
      </div>
      <!--end of tabs container-->
    </div>
  </div>
</div>
tzazo
  • 323
  • 3
  • 13

2 Answers2

0

I think you should fix your problems with only bootstrap not any extra style's but i don't use BS 4 i just fixed your problem with negative margin and bgc transparent take a look:

.tabs {
  display: inline-block;
  border: 1px solid #ECECEC;
  border-radius: 6px;
  margin-bottom: 1.85714286em;
  background-color: transparent;
  padding: 0;
}

.tabs li:not(.active) {
  background-color: #fff !important; 
  opacity: 1;
}

.tabs li.active {
  background-color: red; 
margin-left: -4px;
}

.tabs > li {
  display: inline-block;
  opacity: .5;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tabs > .active,
.tabs:hover {
  opacity: 1;
}

.tabs-container.tabs--vertical .tabs li:not(:last-child) {
  border-right: none;
  border-bottom: 1px solid #ECECEC;
}

.tabs li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  padding: 0.92857143em 1.85714286em;
}
.tabs li:not(:last-child) {
  border-right: 1px solid blue;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-10">
      <div class="tabs-container" data-content-align="left">
        <ul class="tabs">
          <li>
            <div class="tab__title">
              <span class="h5">Code Quality</span>
            </div>

          </li>
          <li class="active">
            <div class="tab__title">
              <span class="h5">Visual Design</span>
            </div>

          </li>
          <li>
            <div class="tab__title">
              <span class="h5">Stack Experience</span>
            </div>

          </li>
        </ul>
       
      </div>
      <!--end of tabs container-->
    </div>
  </div>
</div>
SoliMoli
  • 781
  • 2
  • 6
  • 25
0

Changed display:inline-block to float:left added list-style to none

Now only seeing border:blue color one. 

.tabs > li {
     float: left;
  opacity: .5;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style-type: none;
}


.tabs {
  display: inline-block;
  border: 1px solid #ECECEC;
  border-radius: 6px;
  margin-bottom: 1.85714286em;
  background-color: green;
  padding: 0;
}

.tabs li:not(.active) {
  background-color: #fff !important; 
  opacity: 1;
}

.tabs li.active {
  background-color: red; 
}

.tabs > li {
     float: left;
  opacity: .5;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style-type: none;
}
.tabs > .active,
.tabs:hover {
  opacity: 1;
}

.tabs-container.tabs--vertical .tabs li:not(:last-child) {
  border-right: none;
  border-bottom: 1px solid #ECECEC;
}

.tabs li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  padding: 0.92857143em 1.85714286em;
}
.tabs li:not(:last-child) {
  border-right: 1px solid blue;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-10">
      <div class="tabs-container" data-content-align="left">
        <ul class="tabs">
          <li>
            <div class="tab__title">
              <span class="h5">Code Quality</span>
            </div>

          </li>
          <li class="active">
            <div class="tab__title">
              <span class="h5">Visual Design</span>
            </div>

          </li>
          <li>
            <div class="tab__title">
              <span class="h5">Stack Experience</span>
            </div>

          </li>
        </ul>
       
      </div>
      <!--end of tabs container-->
    </div>
  </div>
</div>
Avinash Dalvi
  • 8,551
  • 7
  • 27
  • 53