Create Bootstrap Tabs With Animation Effects
In this tutorial, we going to see how to create Bootstrap Tabs with animation effects. By default, Bootstrap does not provide any animation effects for the tabs. So here we, going to use Animation Libraries to animate when users click on the relevant tab.
By using Animation for Bootstrap tabs you can change the various animation effects which you like. Animation that leads a part of websites for user interaction, so that user interaction we can do easily with Animation Libraries for the Bootstrap tabs. Use the following code that will help you to use in your project.
|
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 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Create Bootstrap Tabs With Animation Effects</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" /> </head> <body class=""> <!-- Tab Nav Bar --> <ul class="nav" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab" aria-controls="about">About</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#products" role="tab" aria-controls="products">Products</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#contact" role="tab" aria-controls="contact">Contact</a> </li> </ul> <!-- End Tab Nav Bar --> <!-- Tab Content --> <div class="tab-content"> <div class="tab-pane active animated fadeIn" id="home" role="tabpanel">Home</div> <div class="tab-pane animated fadeIn" id="about" role="tabpanel">About</div> <div class="tab-pane animated fadeIn" id="products" role="tabpanel">Products</div> <div class="tab-pane animated fadeIn" id="contact" role="tabpanel">Contact</div> </div> <!-- End Tab Content --> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
In the above code, we used animated fadeIn animation in each tabpanel using Animation Libraries. You also change the animation whatever you like to use. Animation Examples: bounceIn, fadeIn, rotateInUpLeft, etc.,
Conclusion:
I hope this tutorial will help you to do various animation with Bootstrap tabs. If you have any clarification let me know in the comment section and if you like this article share it with your friends.
