Bootstrap 3 Tutorials - #7 Creating Responsive Tabs (with effects)

Bootstrap 3 Tutorials - #7 Creating Tabs in Bootstrap

Download Free Project files for This series.

Drop box : http://bit.ly/17gmvII
Google Drive : http://goo.gl/KFvOnC
Mediafire: http://bit.ly/17T65H5

(100% secure) Virus total scan http://goo.gl/ggG9CU

Subscribe to my YouTube Channel
YouTube : http://www.youtube.com/wiredwiki

Ask, Share, Like
Twitter : http://www.twitter.com/wiredwiki
Facebook : http://www.facebook.com/askorama
Google+ : https://plus.google.com/+LalitBassi

In this video i will show you how to create responsive tabs in bootstrap, which are responsive by nature of course.in this video we will create dynamic tab functionality to transition through panes of local content, even via dropdown menus. We will add effects to our tabs like fade in and also we will add content to them. We will use classes like date-toggle, nav nav-tabs and much much more.

Here are the links of all the video of this series

01 The grid system
https://www.youtube.com/watch?v=mKt-MDwtVB4

#2 Buttons in Bootstrap
https://www.youtube.com/watch?v=REC5XaByIR8

#3 Glyphicons in Bootstrap
https://www.youtube.com/watch?v=MpIyHlTpYs8

#4 Form Components in Bootstrap
https://www.youtube.com/watch?v=6nABfQfXqeE

#5 Tables in Bootstrap
https://www.youtube.com/watch?v=aZB5KjV66Tw

#6 Dropdown's in Bootstrap
https://www.youtube.com/watch?v=qo11KGWKBCg

#7 Tabs in Bootstrap
https://www.youtube.com/watch?v=ew8Wj4URVnI

#8 NavBar in Bootstrap
https://www.youtube.com/watch?v=-YQn166PfIE

#9 ListGroups in Bootstrap
https://www.youtube.com/watch?v=eavLDMjjiBA

#10 Panels in Bootstrap
https://www.youtube.com/watch?v=es9J1_YVOg0

#11 Modals in Bootstrap
https://www.youtube.com/watch?v=7aMRk9q_QLM

#12 Collapse in Bootstrap
https://www.youtube.com/watch?v=sQhTIEon6wY

#13 Carousels in Bootstrap
https://www.youtube.com/watch?v=ZCCmaI0WmXA

#14 Breadcrumbs in Bootstrap
https://www.youtube.com/watch?v=adgJzkyJIoo

#15 Pagination in Bootstrap
https://www.youtube.com/watch?v=ZLUXVBFShDE

#16 Labels in Bootstrap
https://www.youtube.com/watch?v=K_4Cjmdm4dQ

#17 Jumbotron in Bootstrap
https://www.youtube.com/watch?v=K_4Cjmdm4dQ

#18 Thumbnail's in Bootstrap
https://www.youtube.com/watch?v=F3jDjw7UyLM

---

Closed Caption:

ok guys are welcome back in this video
I'm going to talk about navigation tabs
or simply tabs inside bootstrap so i'm
going to create a div with a class of
container inside that i'm going to
create an ordered list with a glass of
for now now tabs and inside this i'm
going to create the lists
ok so i have a link that points to the
section where ever the section that is
and we have the name and the other data
target of DAB so i'm going to copy this
and paste like three times and I'm going
to make this first one active so I'm
going to add a class of active control
save preview in the browser so as you
can see we have all these tabs right
here i'm going to change the name to
let's say about and videos save this
ok so now it's cool and so now i'm going
to create the content for this tab so
i'm going to create another div with a
class of that content inside this
another div with a class of DAB pain and
i'm going to put a paragraph inside this
let's say first batter I there so i'm
going to copy this base two more times i
forgot one more thing i'm going to i did
this
hf link about and this is videos and i'm
going to put ID in here equals home and
i'm going to copy this ID right here and
I'm gonna name is about and this one
videos so i'm going to save this and
even the browser as you can see first x
0 second bad eyes here and start bad
idea
so this is because of you have a given
ID as you can see this is the videos and
this is the videos ID so . the content
of this are
is taken from this idea which is the
third batter is there and that goes for
the second one that goes for the first
one so you can also add another little
fade effect i acted up potential the tab
so let's say fade and fade and let's say
fade and it is still active tab so I'm
going to add fade in and make it active
save this as you can see if i click this
as you can see there is enough a defect
like that you can also change the styles
of the tab for example i'm gonna change
this to phil's save this and as you can
see these are backwards right here you
can also make them vertically by using a
class call is now have stacked like this
and you can also change the pattern of
these are the color of these and if you
want if you want your tabs here to cover
the whole area of the container you can
add a little another class which is
called is now justified save this and as
you can see they cover the area i'm
going to make it a little bit darker so
that you can see by using pills so as
you can see they cover the entire block
that bootstrap block so if I drag this
as you can see it goes like this so so
that's it for the video in the next
video I'm going to talk about a navbar
and bootstrap and yeah so that's it see
you in the next video if you liked the
video please subscribe and like the
video rate the video comment in the
section below and yeah thanks for
watching our see in the next video
yeah