Holla Tech - Learn
Bootstrap 3: Buttons [/su_headimg] 

The btn class adds the basic Bootstrap styling to a button. Additional styling can be added by using these classes:
btn-default
btn-primary
btn-success
btn-warning
btn-danger
btn-info
btn-link

btn-xs Extra Small button.
btn-sm Small button.
btn-md Medium button.
btn-lg Large button.
active Enabled button.
disabled Disabled button.
btn-block Button occupies full width of its parent.

For example, the code below displays buttons in different Bootstrap styles: 

<div class=“container”>
<button type=“button” class=btn>Basic</button>
<button type=“button” class=btn btn-default>Default</button>
<button type=“button” class=btn btn-primary>Primary</button>
<button type=“button” class=btn btn-success>Success</button>
<button type=“button” class=btn btn-warning>Warning</button>
<button type=“button” class=btn btn-danger>Danger</button>
<button type=“button” class=btn btn-info>Info</button>
<button type=“button” class=btn btn-link>Link</button>

<button type=“button” class=btn btn-xs>Extra Small</button>
<button type=“button” class=btn btn-sm>Small</button>
<button type=“button” class=btn btn-md>Medium</button>
<button type=“button” class=btn btn-lg>Large</button>

<button type=“button” class=btn active>Enabled</button>
<button type=“button” class=btn disabled>Disabled</button>
<button type=“button” class=btn btn-block>Block</button>
</div>

 

The button classes can be used on <button>, <a>, and <input> elements.

TASK:
Test the line of codes in a text editor and play around with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT