HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Bootstrap 5 provides different styles of buttons
Bootstrap 5 provides different styles of buttons:
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
The button classes can be used on <a>
, <button>
, or
<input>
elements:
<a href="#" class="btn btn-success">Link Button</a>
<button type="button"
class="btn btn-success">Button</button>
<input type="button" class="btn
btn-success" value="Input Button">
<input type="submit" class="btn
btn-success" value="Submit Button">
<input type="reset" class="btn
btn-success" value="Reset Button">
Why do we put a # in the href attribute of the link?
Since
we do not have any page to link it to, and we do not want to get a "404"
message, we put # as the link. In real life it should of course been a real URL to the "Search" page.
Bootstrap 5 also provides eight outline/bordered buttons.
Move the mouse over them to see an additional "hover" effect:
<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>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Use the .btn-lg
class for large buttons or .btn-sm
class for small buttons:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
To create a block level button
that spans the entire width of the parent element, use the .d-grid
"helper" class on the parent element:
<div class="d-grid">
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
</div>
If you have many block-level buttons, you can control the space between them with the .gap-*
class:
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
</div>
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active
makes a button appear
pressed, and the disabled
attribute
makes a button unclickable. Note that <a> elements do not support the disabled
attribute and must therefore use the .disabled
class to make it visually appear
disabled.
<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>
You can also add "spinners" to a button, which you will learn more about in our BS5 Spinners Tutorial:
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>