About

Buttons

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

You can use the <a> tag with the available button classes and also style the buttons using Font Awesome.

<a class="btn btn-danger" href="#"><i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default" href="#"><i class="fa fa-plus-square"></i> Read more...</a>
<a class="btn btn-info" href="#"><i class="fa fa-download fa-3x pull-left"></i> Click here to download!</a>

With Bootstraps support for collapsible components you can use buttons to show or hide special contents. Keep your courses clean and avoid the scroll of death!

<p>
<button class="btn btn-danger collapsed" data-target="#demo" data-toggle="collapse" type="button">CLICK HERE!</button>
</p>
<div style="height: 0px;" id="demo" class="collapse">
<iframe src="//www.youtube.com/embed/CuKhBKAgQcA" allowfullscreen="" height="315" width="560" frameborder="0"></iframe>
</div>