Bootstrap
In this tutorial we will learn to style buttons in Bootstrap.
We can use the .btn class on an <a>, <button> and <input> elements.
.btn
<a>
<button>
<input>
<a class="btn btn-default" href="#" role="button">Link Button</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input Button"> <input class="btn btn-default" type="submit" value="Submit Button">
Output:
We can use the following classes to type buttons.
Use the classes to provide visual aid to the user.
.btn-default
.btn-primary
.btn-success
.btn-alert
.btn-warning
.btn-danger
.btn-link
<!-- default button --> <button type="button" class="btn btn-default">Default</button> <!-- primary action button --> <button type="button" class="btn btn-primary">Primary</button> <!-- button to indicate success or positive result --> <button type="button" class="btn btn-success">Success</button> <!-- button for alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- button to indicate caution or warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- button to indicate potential danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- make a button look like a link and de-emphasize it --> <button type="button" class="btn btn-link">Link</button>
We can change the size of a button by using the following classes.
.btn-lg
.btn-sm
.btn-xs
<p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
To create a button that span the full width of a parent we use the .btn-block class.
.btn-block
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
If we add the .active class to a button then it will look pressed.
.active
<button type="button" class="btn btn-default btn-lg active">Button</button> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
If we add the .disabled class to a link then it will look unclickable. And if we add the disabled attribute to a button then it will also become unclickable.
.disabled
disabled
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>