Single button:
These are the built-in css coloured buttons available on bootstrap.
Button in a Block
The buttons could also be displayed in a block which adapts to a container width by adding the btn-block class.
Rounded button:
The buttons could also be displayed as rounded buttons by adding the btn-rounded class.
Single button:
<a class="btn btn-primary" href="#">Text on the button</a>
<p><a class="btn btn-purple" href="#">Purple</a></p>
<p><a class="btn btn-turquoise" href="#">Turquoise</a></p>
<p><a class="btn btn-grey" href="#">Grey</a></p>
<p><a class="btn btn-outline-purple" href="#">Outline Purple</a></p>
<p><a class="btn btn-outline-turquoise" href="#">Outline Turquoise</a></p>
<p><a class="btn btn-outline-grey" href="#">Outline Grey</a></p>
The word primary could be replaced with one of the following to change the colour:
- default
- warning
- danger
- success
- info
Button block:
<div class="row"><div class="col-sm-4"><p><a class="btn btn-primary btn-block" href="#">Primary</a></p>
<p><a class="btn btn-default btn-block" href="#">Default</a></p>
</div>
<div class="col-sm-4"><p><a class="btn btn-warning btn-block" href="#">Warning</a></p>
<p><a class="btn btn-danger btn-block" href="#">Danger</a></p>
</div>
<div class="col-sm-4"><p><a class="btn btn-success btn-block" href="#">Success</a></p>
<p><a class="btn btn-info btn-block" href="#">Info</a></p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p><a class="btn btn-purple btn-block" href="#">Purple</a></p>
<p><a class="btn btn-outline-purple btn-block" href="#">Outline purple</a></p>
</div>
<div class="col-sm-4">
<p><a class="btn btn-turquoise btn-block" href="#">Turquoise</a></p>
<p><a class="btn btn-outline-turquoise btn-block" href="#">Outline turquoise</a></p>
</div>
<div class="col-sm-4">
<p><a class="btn btn-grey btn-block" href="#">Grey</a></p>
<p><a class="btn btn-outline-grey btn-block" href="#">Outline grey</a></p>
</div>
</div>
Rounded button
<p><a class="btn btn-primary btn-rounded" href="#">Primary</a></p>
<p><a class="btn btn-default btn-rounded" href="#">Default</a></p>
<p><a class="btn btn-warning btn-rounded" href="#">Warning</a></p>
<p><a class="btn btn-danger btn-rounded" href="#">Danger</a></p>
<p><a class="btn btn-success btn-rounded" href="#">Success</a></p>
<p><a class="btn btn-info btn-rounded" href="#">Info</a></p>
<p><a class="btn btn-purple btn-rounded" href="#">Purple</a></p>
<p><a class="btn btn-turquoise btn-rounded" href="#">Turquoise</a></p>
<p><a class="btn btn-grey btn-rounded" href="#">Grey</a></p>
<p><a class="btn btn-outline-purple btn-rounded" href="#">Outline Purple</a></p>
<p><a class="btn btn-outline-turquoise btn-rounded" href="#">Outline Turquoise</a></p>
<p><a class="btn btn-outline-grey btn-rounded" href="#">Outline Grey</a></p>