<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-6"> <div class="card mt-3 tab-card"> <div class="card-header tab-card-header"> <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">One</a> </li> <li class="nav-item"> <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Two</a> </li> <li class="nav-item"> <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Three</a> </li> </ul> </div> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab"> <h5 class="card-title">Tab Card One</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab"> <h5 class="card-title">Tab Card Two</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab"> <h5 class="card-title">Tab Card Three</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </div>

/*** Bootstrap4 Card with Tabs by @mdeuerlein ***/ body { background-color: #f7f8f9; } .card { background-color: #ffffff; border: 1px solid rgba(0, 34, 51, 0.1); box-shadow: 2px 4px 10px 0 rgba(0, 34, 51, 0.05), 2px 4px 10px 0 rgba(0, 34, 51, 0.05); border-radius: 0.15rem; } /* Tabs Card */ .tab-card { border:1px solid #eee; } .tab-card-header { background:none; } /* Default mode */ .tab-card-header > .nav-tabs { border: none; margin: 0px; } .tab-card-header > .nav-tabs > li { margin-right: 2px; } .tab-card-header > .nav-tabs > li > a { border: 0; border-bottom:2px solid transparent; margin-right: 0; color: #737373; padding: 2px 15px; } .tab-card-header > .nav-tabs > li > a.show { border-bottom:2px solid #007bff; color: #007bff; } .tab-card-header > .nav-tabs > li > a:hover { color: #007bff; } .tab-card-header > .tab-content { padding-bottom: 0; }