• Sunday , 31 May 2020

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

Code Canyon

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

#2 Buttons in Bootstrap

#3 Glyphicons in Bootstrap

#4 Form Components in Bootstrap

#5 Tables in Bootstrap

#6 Dropdown’s in Bootstrap

#7 Tabs in Bootstrap

#8 NavBar in Bootstrap

#9 ListGroups in Bootstrap

#10 Panels in Bootstrap

#11 Modals in Bootstrap

#12 Collapse in Bootstrap

#13 Carousels in Bootstrap

#14 Breadcrumbs in Bootstrap

#15 Pagination in Bootstrap

#16 Labels in Bootstrap

#17 Jumbotron in Bootstrap

#18 Thumbnail’s in Bootstrap

Original source

3d Ocean

Related Posts


  1. sahand kazemzadeh
    June 20, 2019 at 16:55

    Thanks that was useful👍

  2. Dmittri Vasilkov
    June 20, 2019 at 16:55

    Cool tuts, thank you!

  3. Romka Below
    June 20, 2019 at 16:55

    Thx!! I know English very bad, but I understood all what u explain. My respect

  4. ForzaPilot
    June 20, 2019 at 16:55

    For some reason, my content isn't displaying when the page initially loads. Once the page loads and I click on the tabs the content appears.

    Any idea on a fix for that?

    Good video though, easy to understand and follow along, so thanks!

  5. Rohan Kumar
    June 20, 2019 at 16:55

    bro bootstrap 4 aa gya hai update karo tutorial ko

  6. David Raj M
    June 20, 2019 at 16:55

    Very nice video..what i exactly wanted..thanks a lot.

  7. Elson Jim Pialago
    June 20, 2019 at 16:55

    You Forget the CSS on the video?

  8. Ochieng
    June 20, 2019 at 16:55

    Awesome vid thanks

  9. Mousumi Aktar
    June 20, 2019 at 16:55

    nice 🙂

  10. Luis Luis
    June 20, 2019 at 16:55

    However this is a AJAX navigation, andi it is bad, because it can not be located by a url

  11. Yeshoda Rathod
    June 20, 2019 at 16:55

    thanks for the video.

  12. Rizwan Shaikh
    June 20, 2019 at 16:55

    very helpful

  13. Akii J
    June 20, 2019 at 16:55

    after watching some of your videos, i now feel more confident in bootstrap without using any help, great videos! please do keep posting more with frameworks such as css-flexbox or any js-react/angular one's if you ever do get time 😀

  14. Chong Go
    June 20, 2019 at 16:55

    I need help. <li class="active "> is not working

  15. Ryan Holmes
    June 20, 2019 at 16:55

    Exactly what i was looking for, thanks!

  16. Cinder Phoenix
    June 20, 2019 at 16:55

    Thank you for taking time to produce this tutorial and the rest of your tutorials…they have been a tremendous help.

  17. Stalker Walker
    June 20, 2019 at 16:55

    can you make tutorial to make table and on lick on cell to pop up some window?

  18. Sywan Neto
    June 20, 2019 at 16:55

    Where can I get the Js code that allow the tab changing?

  19. Shital Jadhav
    June 20, 2019 at 16:55

    Hi ,Is this mobile supportive?

  20. Chris Valdivia
    June 20, 2019 at 16:55

    Very helpful video – thank you for publishing this!

  21. Raj Shukla
    June 20, 2019 at 16:55

    Thanks man..It really helped me out…

  22. Evan Abasolo
    June 20, 2019 at 16:55

    how can you change the font size of the button?

  23. Jan Buijnsters
    June 20, 2019 at 16:55

    Great tutorial so far!

  24. Carlos Belliard
    June 20, 2019 at 16:55

    Thanks!! the explanation was very, very, very, very clear!! 😀

  25. Theodore Orphanos
    June 20, 2019 at 16:55

    The tutorial is good and explains exactly what it's title says… Those of you who can't figure out what is all about, or can't read simple code, better look for "beginners tutorials" instead of criticising the video… Same applies for those of you who are missing the whole point of it and you expect from the tutor to close the "p" tags for you -as if you couldn't do it yourself in real time coding!!!

  26. Robert H
    June 20, 2019 at 16:55

    Thank you for the tutorial. I'm having this weird problem though. Without using the fade and whatnot, just the basic thing, it won't show the content "First para" unless I actually click on the home tab. However, if I add "fade in active" it shows up. Any idea what causes that?

  27. prerana adhikari
    June 20, 2019 at 16:55

    i dont understand all the people bashing the video in comment section! This, in my opinion, is good enough. People learn the basic first! If this was hard for you to understand than you need to do your home work and learn basic HTML. Cause this is just too easy.

  28. manikanta neelakantam
    June 20, 2019 at 16:55

    Hello boss this is not working and i cant see the tab-pane <p> in web browser what is solution !

  29. Ex0dus111
    June 20, 2019 at 16:55

    REALLY annoying that you forgot to close those <p> tags.
    But good tutorial overall 🙂

  30. Juan Carlos Venero
    June 20, 2019 at 16:55

    Hello it does not work for them either, that loading the page does not display the active tab I use the following code and is perfect.

    PDTA: Excuse my English is lousy.

    <div class="container">
    <ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#informacion">Informacion General</a></li>
    <li><a data-toggle="tab" href="#itinerario">Itinerario</a></li>
    <li><a data-toggle="tab" href="#incluido">Que Incluye</a></li>
    <li><a data-toggle="tab" href="#hoteles">Hoteles</a></li>
    <div class="tab-content">
    <div id="informacion" class="tab-pane fade in active">
    <p>Some content.</p>

    <div id="itinerario" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>

    <div id="incluido" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>

    <div id="hoteles" class="tab-pane fade">
    <p>Some content in menu 2.</p>

  31. Quý Bùi
    June 20, 2019 at 16:55

    great tutorial, thank you very much!!!!

  32. Robert Parasca
    June 20, 2019 at 16:55

    Hi! My tabs are not loading at start. I mean when you opened your HTML document at 2:42 you could see "the first para".


    Please look at my pen and tell me why "the web" tab is not loaded on start.

    Thanks for your tutorials. You are doing a great job!

  33. Болоршагай Энхболд
    June 20, 2019 at 16:55

    Good job 🙂

  34. David Jumeau
    June 20, 2019 at 16:55

    Suggest to rename the title to "Creating Responsive Navigation Tabs". I find it misleading. Reason being that you can create tabbed panes.

  35. Santosh Kumar
    June 20, 2019 at 16:55

    thank u sir. your voice and teaching and ur genral gramatical english
    is good . so that anybody can easily understand

Leave A Comment

You must be logged in to post a comment.