D4mations.com

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

[ad_1]
https://i.ytimg.com/vi/ew8Wj4URVnI/hqdefault.jpg



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

d4mer

,
, , , , , , , , , , , , ,

35 responses to “Bootstrap 3 Tutorials – #7 Creating Responsive Tabs (with effects)”

  4. 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!

  13. 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 😀

  25. 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. 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. 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.

  30. 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>
    </ul>
    <div class="tab-content">
    <div id="informacion" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
    </div>

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

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

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

Leave a Reply