Bootstrap Dropdown Menu

Hello Friends,

Today in this blog we can create Dropdown menu using Bootstrap and html. Earlier I have shared a blog on Create Button using bootstrap.

Bootstrap Dropdown

Bootstrap provide a set of classes that are used to design a dropdown menu.
It is a static dropdown menu used to display a list of item in the format of links, button, images.
The classes that are used to design bootstrap drop down menu are:

See also  HTML / CSS3 Only Content Slider

Class Description
dropdown It defines a dropdown menu
dropdown-menu It defines collection of menu item.
dropdown-item It defines item in menu
dropdown-item-text It defines text in menu item
dropdown-divider It splits the item in dropdown

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( ) -->
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
        <script src="../node_modules/jquery/dist/jquery.js"> </script>
        <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"> </script>
<title> Bootstrap dropdown by codeithub </title>
        <div class="container">
            <h2> Bootstrap Dropdown</h2>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Codeithub</button>
                <div class="dropdown-menu">
                    <div class="dropdown-item">
                        <a href="#">
                            <span class="dropdown-item-text">Home</span>
                    <div class="dropdown-item">
                         <a href="#">
                             <span class="dropdown-item-text">About</span></a></div>
                    <div class="dropdown-divider">
                    <div class="dropdown-item">
                        <a href="#">
                        <span class="dropdown-item-text">faculty</span>

Leave a Reply

Your email address will not be published. Required fields are marked *