Bootstrap Buttons
Bootstrap buttons are used to perform interactive actions such as form submission, reset, redirecting to other pages, etc.
Example
Steps to create a Bootstrap 5 buttons :
- Add the
btnclass to the<button>element's base class. - To assign the button's background color, add contextual classes (
btn-*) to the<button>element's base. - The following are the contextual classes:
btn-primary,btn-secondary,btn-success,btn-danger,btn-warning,btn-info,btn-light,btn-dark, andbtn-link.
Source Code
<a href="#" class="btn btn-secondary" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-primary" value="Input Button" />
<input type="submit" class="btn btn-success" value="Submit Button" />
Code Explanation
Note: Please keep in mind that .btn & .btn-* classes can also be assigned to the <button>, <input>, and <a> element's base class to create a Bootstrap button.
Outline Button
Steps : To create an outline button:
-
Add the
.btnclass to any of the<button>,<a>, and<input>elements' base classes. - Assign the
btn-outline-*class to any of the<button>,<a>, and<input>elements' base classes. -
The following are the outline contextual classes:
btn-outline-primary,btn-outline-secondary,btn-outline-success,btn-outline-danger,btn-outline-warning,btn-outline-info,btn-outline-light,btn-outline-dark, andbtn-outline-link.
Example
Source Code
<div class="container mt-4">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
</div>
Buttons: Size
To create large and smaller buttons, use the .btn-lg & .btn-sm classes, respectively.
Example
General Syntax
<button type="button" class="btn btn-* btn-lg">Large button</button>
<button type="button" class="btn btn-* btn-sm"> Small button </button>
Source Code
<b>Large Button</b>
<button type="button" class="btn btn-primary btn-lg">Large Primary button</button>
<b>Small Button</b>
<button type="button" class="btn btn-primary btn-sm">Small Primary button</button>
Active & Disabled Button
To create an active button i.e. (appear pressed), use active class while to create a disabled button i.e (unclickable), use .disabled class.
Example
General Syntax
<button type="button" class="btn btn-* active">Active Button</button>
<button type="button" class="btn btn-*" disabled>Disabled Button</button>
<a href="#" class="btn btn-* disabled">Disabled Link</a>
Source Code
<div class="container mt-4">
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="../../code-editor/375" class="btn btn-primary disabled">Disabled Link</a>
</div>
Block Level Buttons
Block-level buttons span the entire width of the parent element, and they are created by the display and gap utility classes.
Example
General Syntax
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button1</button>
<button class="btn btn-primary" type="button">Button2</button>
</div>
Source Code
<div class="container">
<b class="text-center">Block Level Button</b>
<div class="row">
<div class="col-sm-8 offset-sm-2 d-grid gap-2">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button1</button>
<button class="btn btn-primary" type="button">Button2</button>
</div>
<b>Button showing Block Level In md Breakpoint</b>
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<b>Centering The Button</b>
<div class="d-grid gap-2 d-md-block mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<b>Button Alignment</b>
<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>
</div><!--/row-->
</div><!--/container-->
Code Explanation
Note: Please keep in mind that the block-level button covers the full available width.
Web Tutorials
