InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Align components in Bootstrap |
|
Answer» Let’s say you have Dropdown component in Bootstrap to create Dropdown menus. The menus generally get displayed in the default format LIKE this: If you want to align the above component to the right, then it is possible with Bootstrap. 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> |
|