Bootstrap Buttons

Buttons are an essential part of any web page. Bootstrap provides different styles and sizes for buttons.

Important Tip:

Use btn-outline-* classes for buttons with outlined styles instead of solid colors.

Button Styles

To achieve the button styles above, Bootstrap has the following classes:

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Use different classes to change button appearance:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Output:

Button Sizes

Below classes define the different sizes:

.btn-lg
.btn-sm
.btn-xs

Below is the example for Bootstrap provides different button sizes using classes:

Output:

Block Level Buttons

Buttons can take the full width of the container using .btn-block:

<button class="btn btn-primary btn-block">Full Width Button</button>

Output:

Active and Disabled Buttons

Use .active to highlight a button and .disabled to disable a button:

<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-secondary disabled">Disabled Button</button>

Output:

Bootstrap Button Groups

Button groups allow multiple buttons to be stacked together.

Important Tip:

When creating justified button groups, ensure that each button is inside an <a> tag to maintain full-width consistency.

Horizontal Button Group

Output:

Vertical Button Group

Bootstraps help to create vertical group also. Use the class .btn-group-vertical to create a vertical button group:

Output:

Justified Button Group

Make buttons span the full width using .btn-group-justified:

Here is the example with <a> element,


Left
Middle
Right

Output:

Nesting Button Groups & Dropdown Menus

You can nest groups and dropdowns inside button groups:







Action 1
Action 2

Output:

Split Button Dropdowns

Split buttons allow part of the button to be a dropdown:





Option 1
Option 2

Output:

Important Notes

Wells have been deprecated in Bootstrap 4+; use cards instead.
Alerts should be used effectively to catch user attention without overwhelming them.
Buttons are versatile and can be styled dynamically using different Bootstrap classes.
Button groups are great for toolbars and grouped actions.

Conclusion

In this blog, we covered essential Bootstrap components like Wells, which help highlight content, Alerts, which notify users of important messages, and Buttons and Button Groups, which enhance user interaction. These elements are important in designing user-friendly and visually appealing web pages. By understanding these components, you can create better web applications effortlessly.

In the next blog, we will learn in detail about the topics of Bootstrap Glyphicons, Badges, and Labels, which will help enhance your web design further by adding small but powerful visual elements.

Want to master Bootstrap? Join Credosystemz today and boost your web development skills!

Request more information

Bootstrap Buttons