"Tabs"
Bootstrap 3.3.0 Snippet by bluekheng

<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 class="option-panel"> <div class="option-line"> <ul class="nav nav-tabs"> <li class="active"><a href="#option1" data-toggle="tab">Option 1 </a></li> <li><a href="#option2" data-toggle="tab">Option 2 </a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="option1"> <figure class="col-md-3"><img src="images/illustration-165.png" width="165" height="165" alt="Order IT equipment from HTL"></figure> <h3>Client buys from HTL</h3> <p>We take care of everything.</p> </div> <div class="tab-pane" id="option2"> <figure class="col-md-3"><img src="images/illustration-165.png" width="165" height="165" alt="We'll install your own equipment"></figure> <h3>Client buys themselves from their preferred supplier</h3> <p>Their IT Guy will sit down with them browse websites and assist as required.</p> </div> </div> </div> </div>
body {background:#333;} .arrow-up { width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #2f2f2f; } .nav-tabs li {color:#fff;} .option-panel { border:1px solid #eee; padding: 10px; } .option-line > .nav-tabs { border: none; margin: 0px;} .option-line > .nav-tabs > li { margin-right: 2px;font-size:1.714rem} .option-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #7F8286;} .option-line > .nav-tabs > li > a > i { color: #a6a6a6;} .option-line>ul>li.active>a, .option-line>ul>li.active>a:hover, .option-line>ul>li.active>a:focus {background-color: transparent; border: none; border-bottom-color: transparent;color:#fff;} .option-line > .nav>li>a:hover, .option-line > .nav>li>a:focus {background-color: transparent;border:none;} .option-line > .nav-tabs > li.open, .option-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf;} .option-line > .nav-tabs > li.open > a, .option-line > .nav-tabs > li:hover > a { border: 0;background: none !important;color: #fff;} .option-line > .nav-tabs > li.open > a > i, .option-line > .nav-tabs > li:hover > a > i { color: #a6a6a6;} .option-line > .nav-tabs > li.open .dropdown-menu, .option-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px;} .option-line > .nav-tabs > li.active {border-bottom: 4px solid #f3565d; position: relative;} .option-line > .nav-tabs > li.active > a { border: 0; color: #fff;} .option-line > .nav-tabs > li.active > a > i { color: #fff;} .option-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0;} .portlet .option-line > .tab-content { padding-bottom: 0;}

Related: See More


Questions / Comments: