In this tutorial we are going to be creating buttons with Bootstrap. Bootstrap buttons have multiple sizes, colors and can be created in with different tags.
The 4 different ways to create buttons with Bootstrap
Bootstrap allows us to create buttons links with the
<a> tag and a simple class. We can also create buttons with the<button> tag, and <input> tag. The <input> tag could have a type of “button” or type of “submit” which is where the 4th button comes from. The code below shows all four buttons.
<a href="#" class="btn btn-default">link</a>
<button class="btn btn-default">Button</button>
<input class="btn btn-default" type="button" value="input"/>
<input class="btn btn-default" type="submit" value="submit"/>
Buttons with contextual classes
Bootstrap allows us to use the secondary classes of
.btn-danger,.btn-success,.btn-warning or .btn-primary to our buttons to allow different colours. We even have a class to make a button appear as a link.
<button class="btn btn-default">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-danger">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-info">Button</button>
<button class="btn btn-link">Button</button>
Buttons sizes
Bootstrap also has size classes for buttons so that we can create larger or smaller buttons by simply adding a class.
<button class="btn btn-default">Normal button</button>
<button class="btn btn-default btn-lg">Large button</button>
<button class="btn btn-default btn-sm">Small button</button>
<button class="btn btn-default btn-xs">Extra small button</button>
0 comments