Button

Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.

Download CSS for Buttons

Direct Dependencies:

bootstrap.bundle.min.js

root.css

colors.css

typography.css

grid.css

utilites.css

buttons.css

Usage

Buttons are clickable interface components that initiate an action or trigger a change in state. They are not decorative elements. Instead, they direct users to complete important goals within an experience.

A single screen in an application or web experience can include more than one button. Let the desired action determine the button usage and combinations.

Main Buttons

Primary	Save primary buttons for the most important call-to-action (CTA), usually related to the user’s main goal. Aim for one primary action per screen, section, or container to eliminate confusion.
Secondary	Secondary buttons are for regular, nonprimary actions. You may use several per screen.
*-Outline	Also called ghost buttons, tertiary buttons have the least emphasis and should be used for the lowest-priority actions. Often used in a group of two or three buttons where tertiary is the lowest priority, or paired with a primary button to indicate an optional action, such as “Save” (primary) and “Cancel” (outline).

Size of Button

Large	Use this size with larger viewports or heroes that need to draw attention to a call-to-action.
Small	Use small buttons in compact areas where a default button would not fit, such as a small component.

btn btn-primary

btn btn-secondary

btn btn-success

btn btn-danger

btn btn-warning

btn btn-info

btn btn-light

btn btn-dark

btn btn-link

btn btn-outline-primary

btn btn-outline-secondary

btn btn-outline-success

btn btn-outline-danger

btn btn-outline-warning

btn btn-outline-info

btn btn-outline-light

btn btn-outline-dark

btn btn-outline-link

btn btn-primary btn-lg

btn btn-secondary btn-lg

btn btn-primary

btn btn-secondary

btn btn-primary btn-sm

btn btn-secondary btn-sm

Disabled buttons

Make buttons look inactive by adding the disabled boolean attribute to any button element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

Groups of buttons

Create responsive stacks of full-width, “block buttons” with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.


					<div class="d-grid gap-2 d-md-flex justify-content-md-end"> 

						<button class="btn btn-primary me-md-2" type="button">Button</button> 

						<button class="btn btn-primary" type="button">Button</button> 

					</div>


					<div class="d-grid gap-2 col-6 mx-auto">

						<button class="btn btn-primary mb-3" type="button">Button</button>

						<button class="btn btn-primary mb-3" type="button">Button</button>

					</div>

Also Defined 'Search', 'Save', 'Remove', 'Add' buttons as far as 'clear' button without border styles which can be used in tables. For proper functionslity require usae of "bootstrap icons" on the page.

.btn.btn-transparent

.btn.btn-search

.btn.btn-remove

.btn.btn-add

.btn.btn-save