Bootstrap 4 button is used to perform interactive action such as form submit, reset, redirecting to other page, etc.
Steps to create bootstrap button :
.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 button can also be created by <a>
and <input>
elements.You have to follow above mention step to create button.
General Syntax
<button type="button" class="btn btn-primary">Primary Button</button>
Source Code
<div class="container my-5">
<div class="row">
<div class="col col-md-4 mb-3">
<button type="button" class="btn btn-primary">Primary Button</button>
</div>
<div class="col col-md-4 mb-3">
<button type="button" class="btn btn-secondary">Secondary Button</button>
</div>
<div class="col col-md-4 mb-3">
<button type="button" class="btn btn-success">Success Button</button>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
Here,.btn
and .btn-*
is applied to the<button>
,<a>
,<input>
element base class 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.
General Syntax
<button type="button" class="btn btn-primary btn-lg">Large Primary button</button>
<button type="button" class="btn btn-primary btn-sm">Small Primary button</button>
Source Code
<div class="container my-5">
<div class="row">
<div class="col col-md-6 mb-4">
<button type="button" class="btn btn-primary btn-lg">Large Primary button</button>
</div>
<div class="col col-md-6 mb-4">
<button type="button" class="btn btn-success btn-sm">Small Primary button</button>
</div>
</div>
</div>
Try it yourself
Source Code : Output
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.
General Syntax
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Source Code
<div class="container">
<div class="row">
<div class="col mb-5">
<button type="button" class="btn btn-primary active">Active Primary</button>
</div>
<div class="col mb-5">
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
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
.
General Syntax
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
Source Code
<div class="container">
<div class="row">
<div class="col mb-5">
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
<div class="col mb-5">
<button type="button" class="btn btn-outline-secondary">Secondary</button>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
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.
General Syntax
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
Source Code
<div class="container">
<div class="row">
<div class="col mb-5">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
<div class="col mb-5">
<button type="button" class="btn btn-info btn-block">Full-Width Button</button>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
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 project application.
Process of creating spinner button.
.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
.
General Syntax
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
Source Code
<div class="container mt-5">
<div class="row">
<div class="col mb-5">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
</div>
<div class="col mb-5">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
</div>
<div class="col mb-5">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
</div>
</div>
</div>
Try it yourself
Source Code : Output
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.