Scribd
Upload
5 views

Practical 9

1

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Practical 9

1

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Menus</title>

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap-grid.min.css">

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Right-Aligned Dropdown Menu</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"


data-toggle="dropdown">

Dropdown <span class="caret"></span>

</button>

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

<h2>Drop-Up Menu</h2>

<div class="dropdown dropup">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropupMenu1" data-


toggle="dropdown">

Dropup <span class="caret"></span>


</button>

<ul class="dropdown-menu" aria-labelledby="dropupMenu1">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

</ul>

</div>

<h2>Menu with Headers</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2"


data-toggle="dropdown">

Dropdown with Header <span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">

<li class="dropdown-header">Header 1</li>

<li><a href="#">Action 1</a></li>

<li><a href="#">Another action 1</a></li>

<li class="divider"></li>

<li class="dropdown-header">Header 2</li>

<li><a href="#">Action 2</a></li>

<li><a href="#">Another action 2</a></li>

</ul>

</div>

<h2>Menu with Glyphicons</h2>

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu3"


data-toggle="dropdown">

Dropdown with Icons <span class="caret"></span>

</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">


<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>

<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>

</ul>

</div>

</div>

</body>

</html>

You might also like