"Circular Bootstrap tabs "
Bootstrap 3.3.0 Snippet by riliwanrabo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
$(function(){
$('a[title]').tooltip();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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 () - 4 years ago - Reply 0


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

riliwanrabo () - 4 years ago - Reply 0


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

riliwanrabo () - 4 years ago - Reply 0


Wow Amazing... thank a lot.

Chandra Sihombing () - 7 years ago - Reply 0


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

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


Love <3

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


Anyone tried to make this for bootstrap 4?

24 Degrees () - 8 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 () - 8 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 () - 7 years ago - Reply 0


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

MarkC () - 9 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 () - 9 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 () - 9 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 () - 9 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 () - 9 years ago - Reply 0


nice snippet.....

suraj vs () - 9 years ago - Reply 0


Nice design. Thanks for sharing !

Lenonard Do () - 9 years ago - Reply 0


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

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

Omar Moretti () - 9 years ago - Reply 0


Thanks for sharing such a nice widget brother.

Ibrahim () - 10 years ago - Reply 0


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

RowBootstrap () - 10 years ago - Reply 0


thanks

Rilwanrabo () - 10 years ago - Reply 0


Is there a way to use less tabs?

Harrison () - 10 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 () - 10 years ago - Reply 0


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

maxsurguy () - 10 years ago - Reply 0


how could this auto expand to larger content

alex () - 10 years ago - Reply 0


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

AZU () - 10 years ago - Reply 0


Thanks AZU ☺

Rilwanrabo () - 10 years ago - Reply 0


Nice

Bang () - 10 years ago - Reply 0


Nice. Thx for sharing

frankis () - 10 years ago - Reply 0


Hey!!! sorry i saw this late

Rilwanrabo () - 10 years ago - Reply 0


How to use less tabs but still centered? Thanks!

laluna () - 10 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 () - 10 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 () - 10 years ago - Reply 0


awesome ... thanks :)

gheith () - 10 years ago - Reply 0


Really very awesome. i m using this in my website

Keshav Katwe () - 10 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 () - 10 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 () - 10 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 () - 10 years ago - Reply 0


Good one man

Rilwanrabo () - 10 years ago - Reply 0


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

Guest () - 10 years ago - Reply 0


nice work

ants () - 10 years ago - Reply 0


This looks really great. Thanks for posting!

Josh Greenwood () - 10 years ago - Reply 0


Thanks for viewing :)

Rilwanrabo () - 10 years ago - Reply 0


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

Stefan () - 10 years ago - Reply 0


Thanks Stefan for contributing! Its now responsive

Rilwanrabo () - 10 years ago - Reply 0


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

Rilwanrabo () - 10 years ago - Reply 0


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

Bruno Seixas () - 10 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 () - 10 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 () - 10 years ago - Reply 0


fixed link

MadMax11 () - 10 years ago - Reply 0


Great! seen it

Rilwanrabo () - 10 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 () - 10 years ago - Reply 0


fixed

MadMax11 () - 10 years ago - Reply 0


Nice looking snippet, thanks!

Webrunner () - 10 years ago - Reply 0


Thanks for the motivation

Rilwanrabo () - 10 years ago - Reply 0


Great!

Jielde () - 10 years ago - Reply 0


Nice to know!!!

Rilwanrabo () - 10 years ago - Reply 0


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

Rue () - 10 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 () - 10 years ago - Reply 0