Bootstrap 5 buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, etc.
Example:Steps to create bootstrap 5 buttons :
.btn
to the
<button>
element base class.
<button>
,use contextual class(.btn-*
) to the <button>
element base class to provide background color of the button.
btn-primary
, btn-secondary
, btn-success
, btn-danger
, btn-warning
, btn-info
, btn-light
, btn-dark
, btn-link
.
Note:Please keep in mind that .btn
& .btn-*
is assigned to the <button>
or <a>
element base class.
Note! Please keep in mind that button can also be created by <a>
and <input>
elements.You have to follow above mention steps to create the button.
Steps : To create outline button:
.btn
to any of the <button>
, <a>
& <input>
element base class.
btn-outline-*
to any of the <button>
,<a>
&
<input>
element base class.
btn-outline-primary
,
btn-outline-secondary
, btn-outline-success
, btn-outline-danger
, btn-outline-warning
, btn-outline-info
, btn-outline-light
, btn-outline-dark
, btn-outline-link
.
Note: To create outline button assign .btn
& .btn-outline-*
to the <button>
or <a>
element base class.
To create large and smaller button
, use .btn-lg
& .btn-sm
class repectively.
Note: Keep in mind that .btn-sm
& .btn-lg
is used to create smaller and larger buttons respectively.
An Active button(appear pressed) is created by assigning .active
to the <button>
base class while as to create disabled button(unclickable) assign .disabled
to the <button>
base class.
Note:To create active and disabled button assign .active
& .disabled
to the <button>
or <a>
element base class.
Block level buttons span the entire width of the parent element and it is created by display and gap utility.
Note: Please keep in mind that the block-level button covers the full available width.