LearnKode

7 Example(s) of Bootstrap Dropdown


Description :

Dropdown is a toggelable menu which allow user to choose one or mutiple items..dropdown-menu under ul component is used to make the dropdown list and .dropdown-toggle is used to make the dropdown toggling on click of button. .caret in span is used to make the arrow sign in dropdown.


Bootstrap Dropdown Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropdown Button</h1>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Typescript</a></li>
                <li><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.divider class is used to divide the dropdown items with thick horizontal border.


Bootstrap Dropdown Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropdown Button</h1>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Typescript</a></li>                 
                <li><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
                <li class="divider"></li>
                <li><a href="#">Learnkode</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

To give header in dropdown menu .dropdown-header class is used.


Bootstrap Dropdown Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropdown Button</h1>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Header 1</li>
                <li><a href="#">Typescript</a></li>
                <li><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Header 2</li>
                <li><a href="#">Learnkode</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In ul component .dropdown-menu-right class is used to open the dropdown menu on right side.


Bootstrap Dropdown Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropdown Button</h1>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li class="dropdown-header">Header 1</li>
                <li><a href="#">Typescript</a></li>
                <li class="disabled"><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Header 2</li>
                <li><a href="#">Learnkode</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.disabled class is used to make a dropdown item disabled.


Bootstrap Dropdown Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropdown Button</h1>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Header 1</li>
                <li><a href="#">Typescript</a></li>
                <li class="disabled"><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Header 2</li>
                <li><a href="#">Learnkode</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

.dropup class is used to open dropdownlist on upperside.


Bootstrap Dropdown Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Dropup Button</h1></br></br></br>
        <div class="dropup">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Typescript</a></li>
                <li><a href="#">Angular</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Example shows the group of dropdowns.


Bootstrap Dropdown Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Dropdown in Group</h2>
        <div class="btn-group">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Sony <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Tablet</a></li>
                    <li><a href="#">Smartphone</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    List <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Language <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Hindi</a></li>
                    <li><a href="#">Engish</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output