Open In App

Explain Transition Plugin in Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

In this article,  we will discuss the transition plugin in bootstrap. We will learn about the transition plugin, how it’s installed, and its use cases with examples.

To make our website responsive, we need to use CSS. There are many CSS frameworks available but Bootstrap is the most popular CSS framework for developing responsive websites. Bootstrap gives us all possible utilities to style responsive websites.

Bootstrap framework is easy to install and use. Bootstrap Documentation helps to give information about all utilities.

In this article, we will discuss the Bootstrap transition plugin. Also, we will learn about the usage of transition plugins, their methods, and events. 

Bootstrap transition plugin: Bootstrap’s Transition plugin provides simple transitions and smoother transition animation effects. Transition plugin effects are applied on text and buttons etc.

How to install it? There are two ways to use the transition plugin. 

  • You will need “transition.js” once along with the other JavaScript files. 
  • You can use “bootstrap.js” or the minified “bootstrap.min.js”

Transition.js is a basic help to transition end events and a CSS transition emulator. It is used by the different plugins to check for CSS transition support and to catch hanging transitions.

The transition plugin is used to enhance the Modals, Tabs, Alerts, and Carousel in Bootstrap. We can learn more about transition effects. 

Following are examples of the transition plugin.

Sliding or fading in modals: The modal plugin uses the transition plugin effects. The modal plugin is used to create a child window over its parent window. It shows more information without leaving the parent window. 
If you want to use the modal plugin individually, then you can add a separate “modal.js” file or use the “bootstrap.min.js” file instead.

Implementation of Modal plugin:

HTML




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href=
        crossorigin="anonymous">  
  
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
         crossorigin="anonymous">
    </script>
    <script src=
         crossorigin="anonymous">
    </script>
    <script src=
         crossorigin="anonymous">
    </script>
    <style>
        body{
           margin-left:10px;
           margin-right:10px;
        }
    </style>    
</head>
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <!-- Button trigger -->
  
    <button type="button" class="btn btn-primary btn-lg" 
        data-toggle="modal" data-target="#idName">
        Modal Button
    </button>
    <!-- Modal -->
    <div class="modal fade" id="idName" tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                       Modal title
                    </h5>
                    <button type="button" class="close" 
                          data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    This is a demo Modal.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" 
                            data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>    
</body>
</html>


Output:

 

Fading out alerts: Alert plugins are used when we want to display information like warnings, confirmations, or alerts given to the user. Alert plugins are easy to install and use. If you want to use the alert plugin individually then add an “alert.js” file in the script else use the “bootstrap.min.js” file.

Implementation of Alert plugin:

HTML




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href=
    crossorigin="anonymous">
          
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
        crossorigin="anonymous">
    </script>
    <script src=
        crossorigin="anonymous">
    </script>
    <script src=
         crossorigin="anonymous">
    </script>    
    
    <style>
        body{
           margin-left:10px;
           margin-right:10px;
        }
    </style>   
</head>
<body>
    <h1 style="color:green">Geeksforgeeks</h1>
    <div class="alert alert-primary" role="alert">
        This is a primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
        This is a secondary alert—check it out!
    </div>  
</body>
</html>


Output:

Bootstrap alert plugin 

Fading out tabs: The bootstrap navigation bar is made up of a group of nav tabs. The plug-in provides the features like switching between panes of views using nav tabs. On clicking each nav tab, you can view the particular tab-pane. It is in a similar context to conditional rendering. The id of panes is saved inside the click handler of the tab and the plugin helps render that particular pane.

Implementation of Tab plugin:

HTML




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href=
         crossorigin="anonymous">   
       
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src=
        crossorigin="anonymous">
    </script>
    <script src=
        crossorigin="anonymous">
    </script>
    <script src=
        crossorigin="anonymous">
    </script
    <style>
        body{
           margin-left:10px;
           margin-right:10px;
        }
    </style>     
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <hr>
    <p class="active-tab">
       <strong>Active Tab</strong>: <span></span></p>
    <p class="previous-tab">
       <strong>Previous Tab</strong>:<span></span></p>
    </hr>
    <ul class="nav nav-tabs" id="Tab">
        <li><a href="#home" data-toggle="tab"
            Home</a></li>          
        <li><a href="#about" data-toggle="tab">
            About </a></li>  
        <li><a href="#contact" data-toggle="tab">
            Contact us</a></li>  
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="home">
           <p>Home pane</p>
        </div>
        <div class="tab-pane" id="about">
            <p>About pane</p>
        </div>
        <div class="tab-pane" id="contact">
            <p>Contact us pane</p>
        </div>
    </div>
  
    <script>
        $(function () {
            $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
               var activeTab = $(e.target).text();
               var previousTab = $(e.relatedTarget).text();
               $(".active-tab span").html(activeTab);
               $(".previous-tab span").html(previousTab);
            });
        });
    </script>  
</body>
</html>


Output:

 

Sliding carousel panes: If you want to add a slider to your website, Bootstrap carousel is an easy, flexible, and responsive way. Slider contains more than one image, iframes, videos, or just about any content that you want. Using the carousel, you can slide the content easily. To add the Bootstrap Carousel to your website, you should do the following steps.

  • First, create an HTML <div> with classes “.carousel” and “.slide”.
  • Create another HTML <div> with the class “.carousel-inner”.
  • Use the data-bs-interval=”…” attribute to specify the time span.
  • Add sufficient div elements according to your needs.

Implementation of Carousel plugin:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">Geeksforgeeks</h1>
        <h2>Carousel Example</h2
        <div id="myCarousel" class="carousel slide" 
            data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" 
                    data-slide-to="0" class="active">
                </li>
                <li data-target="#myCarousel" 
                    data-slide-to="1">
                </li>
                <li data-target="#myCarousel" 
                    data-slide-to="2">
                </li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src=
                  alt="Los Angeles">
                </div>
                <div class="item">
                    <img src=
                    alt="Chicago">
                </div>
                <div class="item">
                    <img src=
                    alt="New York">
                </div>
            </div>
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" 
                data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left">
                </span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" 
                href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right">
                </span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap Carousel plugin 



Last Updated : 08 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads