Working with Bootstrap 4, I've set up a Modal Dialog with Tabs. However, I'm facing an issue with the height of the Modal Header containing the Tabs, and I need to decrease it. Here's the current appearance:
Header - Tall
Desired appearance:
Header - Normal https://i.sstatic.net/J3pSw.png
Bootstrap Code used:
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#AAA" data-toggle="tab">
AAA
</a>
</li>
<li>
<a class="nav-link" href="#BBB" data-toggle="tab">
BBB
</a>
</li>
<li>
<a class="nav-link" href="#CCC" data-toggle="tab">
CCC
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Here is my custom CSS (all other CSS is Default Bootstrap 4):
.modal-header {
background: #4a4a4a;
padding: 0;
}
.tabs-top {
margin-bottom: 1px;
margin-top: 1px;
}
.nav-tabs {
border: 0;
}
.tabs-4 .nav-tabs > li {
width: 25%;
border: 0;
}
.nav-tabs > li > a {
width: 100%;
border: 0;
background: #4a4a4a;
color: #fff;
border-radius: 0;
text-align: center;
}
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: 0;
background: #4a4a4a;
color: #ffd800;
}
.nav-tabs > li.active > a {
border: 0;
background: #4a4a4a;
color: #fff;
}
.nav-tabs > li.active > a.active {
border: 0;
background: #4a4a4a;
color: #ffd800;
}
.nav-item {
vertical-align:top;
}