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 :
btn
class to the <button>
element's base class. btn-*
) to the <button>
element's base. btn-primary
, btn-secondary
, btn-success
, btn-danger
, btn-warning
, btn-info
, btn-light
, btn-dark
, and btn-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.
Steps : To create an outline button:
.btn
class to any of the <button>
, <a>
, and <input>
elements' base classes.
btn-outline-*
class to any of the <button>
, <a>
, and <input>
elements' base 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
, and btn-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>
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>
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 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.