Bootstrap buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, 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 steps to create the button.
General Syntax
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button" />
<input type="submit" class="btn btn-info" value="Submit Button" />
Source Code
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 mb-4">
<a href="#" class="btn btn-info" role="button">Link Button</a>
</div>
<div class="col-sm-6 mb-4">
<button type="button" class="btn btn-info">Button</button>
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-4">
<input type="button" class="btn btn-info" value="Input Button" />
</div>
<div class="col-sm-6 mb-4">
<input type="submit" class="btn btn-info" value="Submit Button" />
</div>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:Please keep in mind that .btn
& .btn-*
is assigned to the <button>
or <a>
element base class.
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.
General Syntax
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
Source Code
<div class="container my-5">
<div class="row">
<div class="col-sm-6 mb-5">
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
<div class="col-sm-6 mb-3">
<button type="button" class="btn btn-outline-secondary">Secondary</button>
</div>
</div>
</div>
Try it yourself
Source Code : Output
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
repectively.
General Syntax
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
Source Code
<div class="container my-5">
<div class="row">
<div class="col-sm-6 mb-4">
<button type="button" class="btn btn-primary btn-lg">
Large button
</button>
</div>
<div class="col-sm-6 mb-4">
<button type="button" class="btn btn-success btn-sm">
Small button
</button>
</div>
</div>
</div>
Try it yourself
Source Code : Output
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.
General Syntax
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Source Code
<div class="container my-5">
<div class="row">
<div class="col-md-4 mb-3">
<button type="button" class="btn btn-primary active">
Active Button
</button>
</div>
<div class="col-md-4 mb-3">
<button type="button" class="btn btn-info" disabled>
Disabled Button
</button>
</div>
<div class="col-md-4 mb-3">
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:To create active and disabled button assign .active
& .disabled
to the <button>
or <a>
element base class.
The Block level button spans the entire width of the parent element and it is created by display and gap utility.
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 my-3 text-center">
<div class="d-grid gap-2">
<button class="btn btn-primary mb-4" type="button">Button1</button>
<button class="btn btn-info" type="button">Button2</button>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note: Please keep in mind that the block-level button covers the full available width.