How can we create a dropdown menu in Bootstrap?

1. Using bootstrap CSS class="Caret"

Now first we use the caret class with li tag. The Caret class shows a caret sign. Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this,

.caret   
{  
    display: inline - block;  
    width: 0;  
    height: 0;  
    margin - left: 2 px;  
    vertical - align: middle;  
    border - top: 4 px solid;  
    border - right: 4 px solid transparent;  
    border - left: 4 px solid transparent;  
}  

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="navbar-inverse">  
        <div class="Container">  
            <ul class="navnavbar-nav">  
                <li><a href="#">Home</a></li>  
                <li><a href="#about">Technologies</a></li>  
                <li><a href="#contact">Article</a></li>  
                <li><a href="#contact">blog</a></li>  
                <li><a href="#contact">News <b class ="caret"></b></a></li>  
            </ul>  
        </div>  
    </div>  
</body>  
  
</html>  

The HTML will render without Bootstrap as in the following:

2. Using bootstrap CSS class="DropDown-Menu"

You now need to add the DropDown-Menu class. Now open the bootstrap.css file and find the DropDown-Menu class. It looks like this,

.dropdown - menu  
{  
    position: absolute;  
    top: 100 % ;  
    left: 0;  
    z - index: 1000;  
    display: none;  
    float: left;  
    min - width: 160 px;  
    padding: 5 px 0;  
    margin: 2 px 0 0;  
    font - size: 14 px;  
    list - style: none;  
    background - color: #ffffff;  
    border: 1 px solid# cccccc;  
    border: 1 px solid rgba(0, 0, 0, 0.15);  
    border - radius: 4 px; -  
    webkit - box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);  
    box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);  
    background - clip: padding - box;  
}  

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="navbarnavbar-inverse">  
        <div class="Container">  
            <ul class="navnavbar-nav">  
                <li><a href="#">Home</a></li>  
                <li><a href="#about">Technologies</a></li>  
                <li><a href="#contact">Article</a></li>  
                <li><a href="#contact">blog</a></li>  
                <li class="dropdown"><a href="#" class="dropdown-toggle">News <b class="caret"></b></a>  
                    <ul class="dropdown-menu">  
                        <li><a href="#">Home</a></li>  
                        <li><a href="#">Technologies</a></li>  
                        <li><a href="#">Article</a></li>  
                        <li><a href="#">blog</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  
    </div>  
    <script src="Bootstrap/js/jquery.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/dropdown.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(document).ready(function() {  
            $('.dropdown-toggle').dropdown();  
        });  
    </script>  
</body>  
  
</html>  

The HTML will be rendered with Bootstrap as in the following,

sub menu