InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Why should we use Button Groups in Bootstrap? |
|
Answer» If you want a SERIES of buttons on your website, then use the Button Groups in Bootstrap. It allows you to stack more than one button on a single line. The Button Groups component in Bootstrap has some classes to create Button group, resize them, stack them VERTICALLY, etc. Let us see them first: .btn-group class: Create a Button Group .btn-group-lg: Larger buttons in Button Groups .btn-group-sm: Smaller buttons in Button GroupsLet us now see a simple example to create Button Groups in Bootstrap. The example displays 5 buttons in the same button group: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link REL="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <p>DISPLAYING Button Groups in Bootstrap:</p> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> </div> </body> </html>The following is the output that displays buttons in a single Button Group: |
|