<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 class="container"> <div> <!-- Nav tabs --> <ul id="jobseekers-tabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active col-sm-2"><a href="#other-resources" aria-controls="other-resources" role="tab" data-toggle="tab">I want help with other resources while I'm unemployed</a><a href="#" class="btn">Learn More</a></li> <li role="presentation" class="col-sm-2"><a href="#education" aria-controls="education" role="tab" data-toggle="tab">I want more education or training</a><a href="#" class="btn">Learn More</a></li> <li role="presentation" class="col-sm-2"><a href="#same-industry-job" aria-controls="same-industry-job" role="tab" data-toggle="tab">I want to find a job in the same occupation or industry</a><a href="#" class="btn">Learn More</a></li> <li role="presentation" class="col-sm-2"><a href="#job-openings" aria-controls="job-openings" role="tab" data-toggle="tab">I want to view job openings and career resources</a><a href="#" class="btn">Learn More</a></li> <li role="presentation" class="col-sm-2"><a href="#services" aria-controls="services" role="tab" data-toggle="tab">I'd like to see what resources and services your provide</a><a href="#" class="btn">Learn More</a></li> <li role="presentation" class="col-sm-2"><a href="#career-change" aria-controls="career-change" role="tab" data-toggle="tab">I want to make a career change</a><a href="#" class="btn">Learn More</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> </div>https://bootsnipp.com/user/snippets/1exyy#profile

#jobseekers-tabs li { text-transform:uppercase; text-align:center; font-weight:bold; } #jobseekers-tabs li a { color: #7e7e7e; border:none; } #jobseekers-tabs li a:first-child { height:120px; } #jobseekers-tabs li.active a { color:#e51837; } #jobseekers-tabs li.active { border-bottom:10px solid #e51837; padding-bottom:1em; } #jobseekers-tabs li.active .btn { color:#fff; background:#e51837; cursor:pointer; } #jobseekers-tabs li .btn { background:#7e7e7e; color:#fff; position:relative; bottom:0; vertical-align:baseline; } .tab-content { border: 1px solid #ccc; padding: 1em; }