Bootstrap 4 buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, etc.
Steps to create bootstrap 4 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:
Here,.btn
and .btn-*
is applied to the<button>
,<a>
,<input>
element base class to create button.
Note! Please keep in mind that button can also be created by
<a>
and <input>
elements. You have to follow above mention step to create button.
Follow the following steps to create larger and smaller button.
.btn-lg
to the
<button>
, <a>
& <input>
element base class.
.btn-sm
to the
<button>
, <a>
& <input>
element base class.
Note: In the above example you are observing that for large button .btn-lg
is used while for small button .btn-sm
is used.
To create active and disabled button ,follow the given below statement.
.active
to the <button>
, <a>
,<input>
base class.
.disabled
to the <button>
, <a>
,<input>
base class.
Note:In the above example,.active
& .disabled
is assigned to
<button>
,<a>
& <input>
element base class.
Follow the given below statement to create boostrap outline button.
.btn
to the <button>
,<input>
,<a>
element base class.
.btn-*
to the <button>
,<input>
,<a>
element base class.
btn-primary
, btn-secondary
,btn-success
, btn-danger
,btn-warning
, btn-info
,btn-dark
, btn-light
, btn-link
.
Creating bootstrap outline button is very easy.You have to add .btn
class followed by one of the contextual class to <a>
,<button>
or <input>
element base class.
To create block level button that spans the entire width of the parent container,use .btn-block class to the <button>
,<a>
, <input>
element base class.
Bootstrap block level element can take full available width and it is created by assigning .btn-block
to
the <button>
,<a>
or <input>
element base class.
Bootstrap provides class that indicate the loading state inside the web page.
Process of creating bootstrap 4 spinner buttons.
.spinner-border
& .spinner-border-*
to the child element(<span>
) of button
.
.spinner-border-*
is used to control the size of spinner. To create smaller spinner use .spinner-border-sm
& for larger spinner size use .spinner-border-lg
.
Note:In the above example,.spinner-border
& .spinner-border
is assigned to the <button>
child element base class to create a loading spinner inside the project.