<!-- Tabs navs --> <ul class="nav nav-tabs nav-justified" id="ex1" role="tablist"> <li class="nav-item" role="presentation"> <a data-mdb-tab-init class="nav-link active" id="ex3-tab-1" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true" >Tab 1</a > </li> <li class="nav-item" role="presentation"> <a data-mdb-tab-init class="nav-link" id="ex3-tab-2" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false" >Tab 2</a > </li> <li class="nav-item" role="presentation"> <a data-mdb-tab-init class="nav-link" id="ex3-tab-3" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false" >Tab 3</a > </li> </ul> <!-- Tabs navs --> <!-- Tabs content --> <div class="tab-content" id="ex2-content"> <div class="tab-pane fade show active" id="ex3-tabs-1" role="tabpanel" aria-labelledby="ex3-tab-1" > <!-- Background image --> <div class="p-5 text-center bg-image" style=" background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp'); height: 400px; " > <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);"> <div class="d-flex justify-content-center align-items-center h-100"> <div class="text-white"> <h1 class="mb-3">Heading 1</h1> <h4 class="mb-3">Subheading 1</h4> <a data-mdb-ripple-init class="btn btn-outline-light btn-lg" href="#!" role="button" >Call to action</a > </div> </div> </div> </div> <!-- Background image --> </div> <div class="tab-pane fade" id="ex3-tabs-2" role="tabpanel" aria-labelledby="ex3-tab-2" > <!-- Background image --> <div class="p-5 text-center bg-image" style=" background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/042.webp'); height: 400px; " > <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);"> <div class="d-flex justify-content-center align-items-center h-100"> <div class="text-white"> <h1 class="mb-3">Heading 2</h1> <h4 class="mb-3">Subheading 2</h4> <a data-mdb-ripple-init class="btn btn-outline-light btn-lg" href="#!" role="button" >Call to action</a > </div> </div> </div> </div> <!-- Background image --> </div> <div class="tab-pane fade" id="ex3-tabs-3" role="tabpanel" aria-labelledby="ex3-tab-3" > <!-- Background image --> <div class="p-5 text-center bg-image" style=" background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/043.webp'); height: 400px; " > <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);"> <div class="d-flex justify-content-center align-items-center h-100"> <div class="text-white"> <h1 class="mb-3">Heading 3</h1> <h4 class="mb-3">Subheading 3</h4> <a data-mdb-ripple-init class="btn btn-outline-light btn-lg" href="#!" role="button" >Call to action</a > </div> </div> </div> </div> <!-- Background image --> </div> </div> <!-- Tabs content -->