<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div role="tabpanel" id="custom-tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs custom-nav" role="tablist"> <li role="presentation" class="active col-md-6 custom-tab"> <a href="#mapa1" aria-controls="home" role="tab" data-toggle="tab"> <div class="col-md-3 col-md-offset-4 text-center"> <i class="fa fa-thumbs-o-up fa-5x"></i> <h3>Option 1</h3> <p>Description of the selected option</p> </div> </a> </li> <li role="presentation" class="col-md-6 custom-tab"> <a href="#mapa2" aria-controls="profile" role="tab" data-toggle="tab"> <div class="col-md-3 col-md-offset-5 text-center"> <i class="fa fa-thumbs-o-up fa-5x"></i> <h3>Option 2</h3> <p>Description of the selected option</p> </div> </a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="custom-tab-pane tab-pane active" id="mapa1"> XXXXX </div> <div role="tabpanel" class="custom-tab-pane tab-pane" id="mapa2"> YYYYY </div> </div> </div>

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; .custom-nav{ margin: 0; border: none; } .custom-tab{ padding: 0; background-color: #DA2B23; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #B90908; color: #fff; } .nav>li>a:hover, .nav>li>a:focus { background-color: #DA2B23; color: #fff; } .custom-tab a{ padding: 0; border: none !important; margin: 0; height: 240px; color: #fff; } .custom-tab.active:after{ top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(185, 9, 8, 0); border-top-color: #B90908; border-width: 30px; margin-left: -30px; }