"Circular Bootstrap tabs "
Bootstrap 3.3.0 Snippet by riliwanrabo

<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 ----------> <section style="background:#efefe9;"> <div class="container"> <div class="row"> <div class="board"> <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>--> <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="welcome"> <span class="round-tabs one"> <i class="glyphicon glyphicon-home"></i> </span> </a></li> <li><a href="#profile" data-toggle="tab" title="profile"> <span class="round-tabs two"> <i class="glyphicon glyphicon-user"></i> </span> </a> </li> <li><a href="#messages" data-toggle="tab" title="bootsnipp goodies"> <span class="round-tabs three"> <i class="glyphicon glyphicon-gift"></i> </span> </a> </li> <li><a href="#settings" data-toggle="tab" title="blah blah"> <span class="round-tabs four"> <i class="glyphicon glyphicon-comment"></i> </span> </a></li> <li><a href="#doner" data-toggle="tab" title="completed"> <span class="round-tabs five"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul></div> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="profile"> <h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="messages"> <h3 class="head text-center">Bootsnipp goodies</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="settings"> <h3 class="head text-center">Drop comments!</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> <p class="text-center"> <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a> </p> </div> <div class="tab-pane fade" id="doner"> <div class="text-center"> <i class="img-intro icon-checkmark-circle"></i> </div> <h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3> <p class="narrow text-center"> Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim. </p> </div> <div class="clearfix"></div> </div> </div> </div> </div> </section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); /* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/ .board{ width: 75%; margin: 60px auto; height: 500px; background: #fff; /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/ } .board .nav-tabs { position: relative; /* border-bottom: 0; */ /* width: 80%; */ margin: 40px auto; margin-bottom: 0; box-sizing: border-box; } .board > div.board-inner{ background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png); background-size: 30%; } p.narrow{ width: 60%; margin: 10px auto; } .liner{ height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default; /* background-color: #ffffff; */ border: 0; border-bottom-color: transparent; } span.round-tabs{ width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tabs.one{ color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34); } li.active span.round-tabs.one{ background: #fff !important; border: 2px solid #ddd; color: rgb(34, 194, 34); } span.round-tabs.two{ color: #febe29;border: 2px solid #febe29; } li.active span.round-tabs.two{ background: #fff !important; border: 2px solid #ddd; color: #febe29; } span.round-tabs.three{ color: #3e5e9a;border: 2px solid #3e5e9a; } li.active span.round-tabs.three{ background: #fff !important; border: 2px solid #ddd; color: #3e5e9a; } span.round-tabs.four{ color: #f1685e;border: 2px solid #f1685e; } li.active span.round-tabs.four{ background: #fff !important; border: 2px solid #ddd; color: #f1685e; } span.round-tabs.five{ color: #999;border: 2px solid #999; } li.active span.round-tabs.five{ background: #fff !important; border: 2px solid #ddd; color: #999; } .nav-tabs > li.active > a span.round-tabs{ background: #fafafa; } .nav-tabs > li { width: 20%; } /*li.active:before { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: -2px; border: 10px solid transparent; border-bottom-color: #fff; z-index: 1; transition:0.2s ease-in-out; }*/ .nav-tabs > 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; } .nav-tabs > 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-content{ } .tab-pane{ position: relative; padding-top: 50px; } .tab-content .head{ font-family: 'Roboto Condensed', sans-serif; font-size: 25px; text-transform: uppercase; padding-bottom: 10px; } .btn-outline-rounded{ padding: 10px 40px; margin: 20px 0; border: 2px solid transparent; border-radius: 25px; } .btn.green{ background-color:#5cb85c; /*border: 2px solid #5cb85c;*/ color: #ffffff; } @media( max-width : 585px ){ .board { width: 90%; height:auto !important; } span.round-tabs { font-size:16px; width: 50px; height: 50px; line-height: 50px; } .tab-content .head{ font-size:20px; } .nav-tabs > li a { width: 50px; height: 50px; line-height:50px; } .nav-tabs > li.active:after { content: " "; position: absolute; left: 35%; } .btn-outline-rounded { padding:12px 20px; } }
$(function(){ $('a[title]').tooltip(); });

Related: See More


Questions / Comments:

is this possible to make it work with 5.0.. in 5.0 the rounded span is not showing and autoplay is not working

yelengamohan () - 2 years ago - Reply 0


Wow! its 6 years. Thanks to everyone who has used this.

riliwanrabo () - 3 years ago - Reply 0


Wow! its 6 years. Thanks to everyone who has used this.

riliwanrabo () - 3 years ago - Reply 0


Wow! its 6 years. Thanks to everyone who has used this.

riliwanrabo () - 3 years ago - Reply 0


Wow Amazing... thank a lot.

Chandra Sihombing () - 6 years ago - Reply 0


error :( https://ibb.co/jVJqOv help please!

Humber Miranda Salas () - 6 years ago - Reply 0


Love <3

Fitri Handayani Ritonga () - 7 years ago - Reply 0


Anyone tried to make this for bootstrap 4?

24 Degrees () - 7 years ago - Reply 0


Hello,
I have a noobie question here:

I grab the HTML above and drop into my page.html, and then grab the CSS code above and drop it into my bootstrap.css but the tabs don't function... am I missing something here?

Screen cap: http://screencast.com/t/0Pn...

Tony Camero () - 7 years ago - Reply 0


This code snippet obviously needs Bootstrap and Jquery to work. You just have to link Bootstrap [https://www.bootstrapcdn.com/] and Jquery [https://cdnjs.com/libraries...] to your project. Good luck. :)

Eron Tancioco () - 6 years ago - Reply 0


Hi. Great Snippet. Is there anyway to have all the tabs on one line after adding 6?

MarkC () - 8 years ago - Reply 0


awesome :) but if change css little ::

.board > div.board-inner{
/*background: #fafafa url(http://subtlepatterns.com/p...
background: #F9F9F9;
background-size: 30%;
}

will make it beautiful

Zahid Ullah () - 8 years ago - Reply 0


Hi there! i included another tab and it fallls on to a second line. how can we keep it on the first line? thanx!

great snip by the way! :)

cheers!

udara () - 8 years ago - Reply 0


Hi.. It's great work. I want to know how to go to the specific tab from an external link or stay on the same specific tab after reloading the page.

Shahed Jamal () - 8 years ago - Reply 0


Tabs aren't mobile friendly on iOS7 both iPhone 5/6 and iPad 1/2 from what i've tested i'm afraid, it required a double click to activate the next tab, on first touch the tooltip appears, may i suggest disabling the tooltip plugin and using touchevents for consistency through-out mobile devices

mhill168 () - 8 years ago - Reply 0


nice snippet.....

suraj vs () - 8 years ago - Reply 0


Nice design. Thanks for sharing !

Lenonard Do () - 8 years ago - Reply 0


Hi, why in jellybean default browsrs the background resuslts "squared"?

screenshot: www.dftn.it/download/screen...

Omar Moretti () - 8 years ago - Reply 0


Thanks for sharing such a nice widget brother.

Ibrahim () - 9 years ago - Reply 0


Wow! Nice design. Planning to this snippet in our template.

RowBootstrap () - 9 years ago - Reply 0


thanks

Rilwanrabo () - 9 years ago - Reply 0


Is there a way to use less tabs?

Harrison () - 9 years ago - Reply 0


I am new to bootstrap and I am not able to configure this snippet to my page. Can some one please send me working .zip folder of this snippet.

Andrej () - 9 years ago - Reply 0


Yes, you can download the snippet if you are a registered user. Click on the cog wheel.

maxsurguy () - 9 years ago - Reply 0


how could this auto expand to larger content

alex () - 9 years ago - Reply 0


Wow, great work. I love this Rilwanrabo & have favourite this :)

AZU () - 9 years ago - Reply 0


Thanks AZU ☺

Rilwanrabo () - 9 years ago - Reply 0


Nice

Bang () - 9 years ago - Reply 0


Nice. Thx for sharing

frankis () - 9 years ago - Reply 0


Hey!!! sorry i saw this late

Rilwanrabo () - 9 years ago - Reply 0


How to use less tabs but still centered? Thanks!

laluna () - 9 years ago - Reply 0


hmmm... what am I missing ?

http://omarhabash.com/nova/...

Looks great but the tab content is stacked making each tab's content lower than the next. Help!?

Omar () - 9 years ago - Reply 0


if anyone else has this problem I fixed it with this css

.tab-pane{
display: none;
}

.tab-pane.active {
display: block;
}

Omar () - 9 years ago - Reply 0


awesome ... thanks :)

gheith () - 9 years ago - Reply 0


Really very awesome. i m using this in my website

Keshav Katwe () - 9 years ago - Reply 0


hi. i love this snippet. i wonder why it is not working on mine. I use the same code above. i tried different advise on the net but still it is not working. tooltip is showing as normal that's it. any help please?

Edmund Punongbayan () - 9 years ago - Reply 0


Hi Edmund, check the version of your scripts[ bootstrap, jquery]. make sure you are using the latest versions and updated browser or simply download this code by clicking the cog icon above the preview. thanks

Rilwanrabo () - 9 years ago - Reply 0


Hey guys, I've forked this into a simple form wizard to navigate through the tabs. http://bootsnipp.com/snippe...

campo () - 9 years ago - Reply 0


Good one man

Rilwanrabo () - 9 years ago - Reply 0


Hi guys, I forked this into a simple form wizard. http://bootsnipp.com/snippe...

Guest () - 9 years ago - Reply 0


nice work

ants () - 9 years ago - Reply 0


This looks really great. Thanks for posting!

Josh Greenwood () - 9 years ago - Reply 0


Thanks for viewing :)

Rilwanrabo () - 9 years ago - Reply 0


Can this be made responsive? The tab circles aren't responsive, can fix that? Thanks!

Stefan () - 9 years ago - Reply 0


Thanks Stefan for contributing! Its now responsive

Rilwanrabo () - 9 years ago - Reply 0


updated css and html [tab-pane divs].. added transition effects to the css on the pseudo element
Thanks

Rilwanrabo () - 9 years ago - Reply 0


For mobile friendly web app´s it´s a great way to display tabs =) Tks

Bruno Seixas () - 9 years ago - Reply 0


Anyone know how to get the arrow to slide maybe using css transforms? Would look much slicker. Like this

http://www.polymer-project....

*Sorry my link was broken

MadMax11 () - 9 years ago - Reply 0


Couldn't open the link but i have added some effects with transitions to kinda animate the border and also i added bootstrap's 'fade in' classes to the pane.

Rilwanrabo () - 9 years ago - Reply 0


fixed link

MadMax11 () - 9 years ago - Reply 0


Great! seen it

Rilwanrabo () - 9 years ago - Reply 0


Thanks!
the link fails
Error: Not Found
The requested URL /components/polymer-ui-nav-arrow/demo.html) was not found on this server.

Guest () - 9 years ago - Reply 0


fixed

MadMax11 () - 9 years ago - Reply 0


Nice looking snippet, thanks!

Webrunner () - 9 years ago - Reply 0


Thanks for the motivation

Rilwanrabo () - 9 years ago - Reply 0


Great!

Jielde () - 9 years ago - Reply 0


Nice to know!!!

Rilwanrabo () - 9 years ago - Reply 0


Line 33 the data-toggle has a space after the word tab, disabling the last section.

Rue () - 9 years ago - Reply 0


Thanks!! for your contribution.
Actually i might have used same id of done twice... i changed it to something else. now works!

Rilwanrabo () - 9 years ago - Reply 0