'Circular Bootstrap Tabs'

We are defining the steps 'how to create - Circular Bootstrap Tabs'

Step1

Simply add the below code inside the <head> section of the page:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Step2

Add this style css before the closing of </head> tag

<style type="text/css">
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  border: 0;
  border-bottom-color: transparent;
}
span.round-tabs{
  width: 70px;
  height: 70px;
  line-height: 70px;
  display: inline-block;
  border-radius: 100px;
  background: #eee;
  z-index: 2;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 25px;
}
.nav-tabs > li.active > a span.round-tabs{
  background: #fafafa;
}
.nav-tabs > li {
  width: 20%;
}
li:after {
  content: " ";
  position: absolute;
  left: 45%;
  opacity:0;
  margin: 0 auto;
  bottom: 0px;
  border: 5px solid transparent;
  border-bottom-color: #ddd;
  transition:0.1s ease-in-out;
}
li.active:after {
  content: " ";
  position: absolute;
  left: 45%;
  opacity:1;
  margin: 0 auto;
  bottom: 0px;
  border: 10px solid transparent;
  border-bottom-color: #ddd;
}
.nav-tabs > li a{
  width: 70px;
  height: 70px;
  margin: 20px auto;
  border-radius: 100%;
  padding: 0;
}
.nav-tabs > li a:hover{
 background: transparent;
}
.tab-pane{
 position: relative;
 padding-top: 50px;
}
@media( max-width : 768px ){
    span.round-tabs {
     font-size:16px;
     width: 50px;
     height: 50px;
     line-height: 50px;
    }    
    .nav-tabs > li a {
     width: 50px;
     height: 50px;
     line-height:50px;
    }    
    li.active:after {
     content: " ";
     position: absolute;
     left: 35%;
    }
}
</style>	

Step3

Paste the html into the <body> tag

<section>
<div class="container>
<div class="row>
<div class="board>
<div class="board-inner>
<ul class="nav nav-tabs" id="myTab>
<div class="liner></div>
<li class="active>
<a href="#home" data-toggle="tab" title="Home>
<span class="round-tabs one>
<i class="fa fa-home></i>
</span>
</a>
</li>
<li>
<a href="#profile" data-toggle="tab" title="profile>
<span class="round-tabs>
<i class="fa fa-user></i>
</span>
</a>
</li>
<li>
<a href="#messages" data-toggle="tab" title="sevices>
<span class="round-tabs>
<i class="fa fa-list></i>
</span> </a>
</li>
<li>
<a href="#settings" data-toggle="tab" title="products>
<span class="round-tabs>
<i class="fas fa-box-open></i>
</span>
</a>
</li>
<li>
<a href="#done" data-toggle="tab" title="Contact>
<span class="round-tabs>
<i class="fa fa-envelope></i>
</span> </a>
</li>
</ul>
</div>
<div class="tab-content>
<div class="tab-pane fade in active" id="home>
<h2 class="text-center>Ano ang Lorem Ipsum?</h2>
<p class="text-center>
Ang Lorem Ipsum ay ginagamit na modelo ng industriya ng pagpriprint at pagtytypeset. Ang Lorem Ipsum ang naging regular na modelo simula pa noong 1500s, noong may isang di kilalang manlilimbag and kumuha ng galley ng type at ginulo ang pagkaka-ayos nito upang makagawa ng libro ng mga type specimen. Nalagpasan nito hindi lang limang siglo, kundi nalagpasan din nito ang paglaganap ng electronic typesetting at nanatiling parehas. Sumikat ito noong 1960s kasabay ng pag labas ng Letraset sheets na mayroong mga talata ng Lorem Ipsum, at kamakailan lang sa mga desktop publishing software tulad ng Aldus Pagemaker ginamit ang mga bersyon ng Lorem Ipsum.
</p>
<p class="text-center>
<a href="" class="btn btn-success btn-lg> Know More</a>
</p>
</div>
<div class="tab-pane fade" id="profile>
<h2 class="text-center>Bakit natin ito ginagamit?</h2>
<p class="text-center>
Matagal na nating alam na nakukuha ang atensyon ng nagbabasa ang nababasa na nilalaman ng pahina kapag tinitignan ang pagkakaayos. Ang punto ng paggamit ng Lorem Ipsum ay ito ay may humigit-kumulang na normal na distribusyion ng mga lettra, kesa sa paggamit ng 'Dito ang nilalaman, dito ang nilalaman', pinamumuka nitong nababasa. Maraming desktop publishing packages at web page editors ang gumagamit na ngayong ng Lorem Ipsum bilang regular na modelo ng nilalaman, at ang pag-search ng 'lorem ipsum' ay mag bubunyag ng maraming web sites na nasa kabataan pa lamang nila. Ang iba't-ibang mga bersyon nito ay nagbago paglipas ng mga taon, aksidente minsan, minsan sadya (nilagyan ng mga katatawanan at iba pa).
</p>
<p class="text-center>
<a href="" class="btn btn-success btn-lg> Know More </a>
</p>
</div>
<div class="tab-pane fade" id="messages>
<h2 class="text-center>Saan ito nanggaling?</h2>
<p class="text-center>
Salungat sa kaalaman ng marami, ang Lorem Ipsum ay hindi puro walang kwentang salita lang. Umuugat ito sa klasikong literatura na Latin galing 45 BC, Pinpahiwatig na higit 2000 na ang taong gulang nito. Si Richard McClintock, isang Latin na propesor sa Hampden-Sydney College sa Viginia, ay hinanap ang isa sa mga tagong salita sa Latin, consectetur, galing sa talata ng Lorem Ipsum, at papunta sa mga siyudad sa mundo sa klasikal na literatura, natuklasan ang walang kadudadudang pinanggalingan. Ang Lorem Ipsum ay nangagaling sa mga seksyon 1.10.32 at 1.10.33 ng "de Finibus Bonorum et Malorum" (Ang Kasukdulan ng Mabuti at Masama) ni Cicero, isinulat noong 45 BC. Ang librong ito ay isang treatise sa teorya ng etika, tanyag noong Renaissance. Ang unang linya ng Lorem Ipsum, "Lorem ipsum dolor sit amet..", ay galing sa linya ng sekyon 1.10.32
</p>
<p class="text-center>
<a href="" class="btn btn-success btn-lg> Know More </a>
</p>
</div>
<div class="tab-pane fade" id="settings>
<h2 class="text-center>Saan ako makakakuha?</h2>
<p class="text-center>
Maraming klase ng mga talata ng Lorem Ipsum and pwedeng magamit, pero ang karamihan ay nabago, dahil sa mga katatawanan, o ang mga ginulong mga salitang mahirap paniwalaan. Kung ikaw ay gagamit ng talata galing Lorem Ipsum, kailangan mong siguraduhin na walang nakakahiyang nakasulat sa gitna nito. Lahat ng mga gumagawa ng Lorem Ipsum sa Internet ay may ugali na ulitin and mga tipak hanggang sa kinakailangan, dahilan upang ito ang maging pinaka unang totoong tagagawa sa Internet, Gumagamit ito ng diksiyunaryo na may humigit 200 na salitang Latin, sinamahan ng isang dakot ng mga modelong pangungusap na straktura, upang makagawa ng Lorem Ipsum na mukang makatwiran. Kaya ang nagawang Lorem Ipsum ay palaging walang nauulit, nakakatawa, o mga walang-katangian na mga salita at iba pa.
</p>
<p class="text-center>
<a href="" class="btn btn-success btn-lg> Know More</a>
</p>
</div>
<div class="tab-pane fade" id="done>
<div class="text-center>
<i class="img-intro icon-checkmark-circle></i>
</div>
<h2 class="text-center>Natin ito ginagamit?</h2>
<p class="text-center>
Maraming desktop publishing packages at web page editors ang gumagamit na ngayong ng Lorem Ipsum bilang regular na modelo ng nilalaman, at ang pag-search ng 'lorem ipsum' ay mag bubunyag ng maraming web sites na nasa kabataan pa lamang nila. Ang iba't-ibang mga bersyon nito ay nagbago paglipas ng mga taon, aksidente minsan, minsan sadya (nilagyan ng mga katatawanan at iba pa).
</p>
<p class="text-center>
<a href="" class="btn btn-success btn-lg> OK </a>
</p>
</div>
<div class="clearfix></div>
</div>

</div>
</div>
</div>
</section>

	
Copyright © 2020. All rights reserved.