1.

How to align the dropdown menu to right in Bootstrap?

Answer»

To align the menus on your website, you can use the .dropdown-menu-right class. It aligns the dropdown menus on the right.

The following is an example that aligns the menu to the right on clicking:

<!DOCTYPE html> <html lang="en"> <head>   <TITLE>Bootstrap Menus Alignment</title>   <meta charset="utf-8">   <meta name="VIEWPORT" content="width=device-width, initial-scale=1">  <LINK rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <DIV class = "container">    <h2>Football Teams</h2>      <p>The following is the information about the teams:</p>      <div class = "dropdown">        <button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown">Teams             <span class = "caret"></span></button>             <ul class = "dropdown-menu dropdown-menu-right">                <li><a href = "#">Real MADRID</a></li>                <li><a href = "#">CSKA Moscow</a></li>                <li><a href = "#">Manchester United</a></li>                <li><a href = "#">Barcelona</a></li>             </ul>          </div>       </div> </body> </html>

The output:

Above, we have created and set the menus on the right as shown below: 

<ul class = "dropdown-menu dropdown-menu-right">    <li><a href = "#">Real Madrid</a></li>    <li><a href = "#">CSKA Moscow</a></li>    <li><a href = "#">Manchester United</a></li>    <li><a href = "#">Barcelona</a></li> </ul>


Discussion

No Comment Found

Related InterviewSolutions