Guides-Basic

Buttons

Posted on by

To add buttons to your page/post, you must be in the 'Text' editor view.

Compatible Tags

You can make buttons out of the following HTML tags:

Tag Sample Code
 a 
<a class="btn btn-default" href="https://www.google.com" role="button">Link</a>
 button 
<button class="btn btn-default" type="submit">Button</button>
 input (type: button) 
<input class="btn btn-default" type="button" value="Input">
input (type: submit) 
<input class="btn btn-default" type="submit" value="Submit">

Button Classes

You may use the following btn btn-* classes to produce buttons of different colors:

Class Sample Code Output
btn-default 
<button type="button" class="btn btn-default">Default</button>
btn-primary 
<button type="button" class="btn btn-primary">Primary</button>
btn-success 
<button type="button" class="btn btn-success">Success</button>
btn-info 
<button type="button" class="btn btn-info">Info</button>
btn-warning 
<button type="button" class="btn btn-warning">Warning</button>
btn-danger 
<button type="button" class="btn btn-danger">Danger</button>
btn-link 
<button type="button" class="btn btn-link">Link</button>

Button Sizes

You may use the following btn btn-* classes to produce buttons of different sizes:

Class Sample Code Output
btn-lg 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
N/A (default) 
<button type="button" class="btn btn-primary">Default button</button>
btn-sm 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
btn-xs 
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Block Buttons

You may also create buttons that fill the entire width of the parent div by adding a btn-block class. For example: