Bootstrap Articles - Page 39 of 49

The Bootstrap success contextual class indicates a successful or positive action.You can try to run the following code to implement the .success class −ExampleLive Demo           Bootstrap Table                                                                      Subject                Marks                Student                                                               Maths                 90                 Amit                                             Science                 80                 Aman                                             English                 85                 Rahul                                  

To segment button dropdowns in input groups, use the same general style as the dropdown button, but add a primary action along with the dropdown as can be seen in the following example:ExampleLive Demo           Bootstrap Example                                                                                                                                       Subject                                                                                         Toggle Dropdown                                                                                       Maths                               Science                                                                                                                                                                                                                                                                            Course                                                                                                        Toggle Dropdown                                                                            BCA                            MCA                                                                                                              

Change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself.You can try to run the following code to change the size of input groups in Bootstrap:ExampleLive Demo           Bootstrap Example                                                                   @                                                       @                                                       @                                

Create an extra small button using the btn-xs Bootstrap class. You can try to run the following code to implement the btn-xs class:ExampleLive Demo           Bootstrap Example                                                       Subject                                             Programming             Web Dev             Database             Networking                    

Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent .btn-group container. You can try to run the following code set menus to drop up −ExampleLive Demo           Bootstrap Example                                 Dropdown                             Subject                                                 Programming             Web Dev             Database             Networking                       Dropup                                            Subject                                                          Programming                Web Dev                Database                Networking                                

The btn-group-vertical class make a set of buttons appear vertically stacked rather than horizontally.You can try to run the following code to implement btn-group-vertical class:ExampleLive Demo           Bootstrap Example                                          BCA          B.Tech                                      Masters                                                        MCA                MBA                M.Tech                M.COM                                

Nest button groups within another button group i.e, place a .btn-group within another .btn-group. This is done when you want dropdown menus mixed with a series of buttons.To nest button groups, you can try to run the following code −ExampleLive Demo           Bootstrap Example                                          Rank          Marks                                      Subjects                                                        Maths                Science                English                                

Use btn-large, .btn-sm, or .btn-xs class to use dropdowns with any button size.Let us see an example of btn-largeExampleLive Demo           Bootstrap Example                                                       Default                                                 Action             Another action             Something else here                         Separated link                    

Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown.ExampleYou can try to run the following code to split button dropdowns −Live Demo           Bootstrap Example                                          Admissions                                   Toggle Dropdown                                 Masters             Bachelors                                Faculty                                   Toggle Dropdown                                 Management             Technical             Staff                    

To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group.You can try to run the following code to add dropdown menu to buttons −ExampleLive Demo           Bootstrap Example                                                       Default                                             Action             Another action             Something else here                         Separated link                                             Primary                                             Action             Another action             Something else here                         Separated link