"Responsive NavTabs with Icons"
Bootstrap 3.0.0 Snippet by abhimanyusankhyan4

<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 ----------> <section id="home-process"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs list-inline"> <li class="active"> <a class="center-block nav-ttl" href="#tab1default" data-toggle="tab"> <i class="seach"></i> <span>Discovery</span> </a> </li> <li> <a class="nav-ttl" href="#tab2default" data-toggle="tab"> <i class="seach"></i> <span>Design</span> </a> </li> <li> <a class="nav-ttl" href="#tab3default" data-toggle="tab"> <i class="seach"></i> <span>Release Planning</span> </a> </li> <li> <a class="nav-ttl" href="#tab4default" data-toggle="tab"> <i class="seach"></i> <span>Development</span> </a> </li> <li> <a class="nav-ttl" href="#tab5default" data-toggle="tab"> <i class="seach"></i> <span>Final UAT + Launch</span> </a> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"> <div class="panel-content"> <p>Failed high-school chemistry? Me too. Luckily, that has nothing to do with promoting and selling a good or service. Ask marketing believes, like a science, that a solid understanding of a group is at the core of creating a message that moves people to buy</p> <a href="" href="">We keep it simple</a> </div> </div> <div class="tab-pane fade" id="tab2default"> <div class="panel-content"> <p>As a full-service development agency, our process begins with an in-depth, comprehensive research and planning oiness goal. The first step is all about setting the stage for a big, innovative solution.</p> <a href="" href="">We keep it simple</a> </div> </div> <div class="tab-pane fade" id="tab3default"> <div class="panel-content"> <p>we start asking questions to clients that help us align ourselves with their team and thus, recognize their business goal. The first step is all about setting the stage for a big, innovative solution.</p> <a href="" href="">We keep it simple</a> </div> </div> <div class="tab-pane fade" id="tab4default"> <div class="panel-content"> <p>As a full-service development agency, our process begins with an in-depth, comprehensive research and planning on the idea the clients share, which lay the groundwork for every project we develop. To understand the concept thoroughly,their business goal. The first step is all about setting the stage for a big, innovative solution.</p> <a href="" href="">We keep it simple</a> </div> </div> <div class="tab-pane fade" id="tab5default"> <div class="panel-content"> <p> team and thus, recognize their business goal. The first step is all about setting the stage for a big, innovative solution.</p> <a href="" href="">We keep it simple</a> </div> </div> </div> </div> </div> </div> </div> </div> </section>
/*home tabs*/ #home-process { padding: 4% 0; background-color: #00425A; color: #fff; } #home-process .section-heading { color: #fff; } #home-process .section-heading::after { background: #fff; } #home-process .with-nav-tabs { border: none; box-shadow: none; background: transparent; } #home-process .with-nav-tabs .panel-heading { border: none; background: transparent; } #home-process .with-nav-tabs .panel-heading .nav-tabs { border: none; width: 90%; display: block; text-align: center; margin: 0 auto; } #home-process .with-nav-tabs .panel-heading .nav-tabs li.active a { border: none; border-radius: 0; background: transparent; } #home-process .with-nav-tabs .panel-heading .nav-tabs li { width: 20%; text-align: center; margin: 0 auto; } #home-process .with-nav-tabs .panel-heading .nav-tabs li.active a, #home-process .with-nav-tabs .panel-heading .nav-tabs li:hover a,#home-process .with-nav-tabs .panel-heading .nav-tabs li:focus a { border: none; border-radius: 0; background: transparent; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl { height: 100px; display: grid; color: #fff; border: none; outline: none; background: transparent; position: relative; padding-left: 0; padding-right: 0; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl::after { content: ''; border-top: 2px dashed; position: absolute; right: -24%; width: 75px; top: 35%; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:last-of-type .nav-ttl::after { display: none; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl .seach { background-image: url("http://ask.marketing/wp-content/themes/askmarketing/images/sprite.png"); width: 30px; margin: 0 auto 10px; background-position: -1px -423px; height: 37px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(2) .seach { background-position: -53px -426px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(3) .seach { background-position: -117px -428px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(4) .seach { background-position: -171px -428px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(5) .seach { background-position: -237px -428px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl span { color: inherit; letter-spacing: 0.6px; font: 600 15px/24px open sans; display: inline; padding: 3px 15px; width: auto; border: 1px solid transparent; margin: 0 auto; transition: all .2s ease .2s; } #home-process .with-nav-tabs .panel-heading .nav-tabs li.active span, #home-process .with-nav-tabs .panel-heading .nav-tabs li:hover span { border-color: #fff; transition: all .2s ease .2s; } #home-process .with-nav-tabs .panel-body .panel-content { text-align: center; color: #fff; } #home-process .with-nav-tabs .panel-body .panel-content p { color: #fff; font: 400 15px/21px open sans; margin: 0 0 20px; } #home-process .with-nav-tabs .panel-body .panel-content a { letter-spacing: 0.6px; font: 600 15px/24px open sans; padding: 5px 15px; border: 1px solid; color: #fff; text-decoration: none; display: inline-block; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl::before { position: absolute; top: 13px; left: 0; padding: 0 10px; text-align: center; width: 100%; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; display: none; font: 600 15px/24px open sans; color: #fff; text-transform: capitalize; } @media screen and (max-width:767px){ #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl span { display: none; } #home-process .with-nav-tabs .panel-heading { padding: 10px 0px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl::after { display: none; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl .seach { margin: 40px auto 10px; } #home-process .with-nav-tabs .panel-heading .nav-tabs li.active .nav-ttl::before { display: block; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:first-of-type .nav-ttl::before{ content: "Discovery"; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(2) .nav-ttl::before{ content: "Design"; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(3) .nav-ttl::before{ content: "Release Planning"; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(4) .nav-ttl::before{ content: "Development"; } #home-process .with-nav-tabs .panel-heading .nav-tabs li:nth-child(5) .nav-ttl::before{ content: "Final UAT + Launch"; } #home-process .with-nav-tabs .panel-heading .nav-tabs li { position: unset; padding: 0; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl { position: unset; margin-top: 40px; height: auto; border: 1px solid transparent; border-radius: 0; } #home-process .with-nav-tabs .panel-heading .nav-tabs { width: 100%; position: relative; } #home-process .with-nav-tabs .panel-body { padding: 0; } #home-process .with-nav-tabs .panel-heading .nav-tabs li.active .nav-ttl { border: 1px solid #fff; } #home-process .with-nav-tabs .panel-heading .nav-tabs li .nav-ttl .seach { margin: 0 auto; width: 32px; height: 32px; } #home-process .with-nav-tabs .panel-body .panel-content p { font: 400 13px/20px open sans; margin: 0 0 15px; } #home-process .with-nav-tabs .panel-body .panel-content a { font: 600 13px/22px open sans; padding: 5px 15px; } }

Related: See More


Questions / Comments: