Basic Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements.



Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Checkbox and Radio Buttons

.button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons.

Block Level Buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block

Active State

Add the active class to <a> buttons.

Primary link Link

Disabled State

Add the disabled attribute to <button> or <a> buttons.


Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Rounded Button

Add .btn-rounded to default button to get rounded corners.

Button Group Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.

Nesting Button Group

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

2020 © Lunoz.
Design & Develop by Myra