Buttons

Button elements

<button type="button" class="btn btn-danger">DANGER</button>

<button type="button" class="btn btn-dark">DARK</button>

<button type="button" class="btn btn-info">INFO</button>

<button type="button" class="btn btn-light">LIGHT</button>

<button type="button" class="btn btn-primary">PRIMARY</button>

<button type="button" class="btn btn-secondary">SECONDARY</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-link">Link</button>
Button tags
Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Outline buttons

<button type="button" class="btn btn-outline-danger">DANGER
</button>

<button type="button" class="btn btn-outline-dark">DARK
</button>

<button type="button" class="btn btn-outline-info">INFO
</button>

<button type="button" class="btn btn-outline-light">LIGHT
</button>

<button type="button" class="btn btn-outline-primary">PRIMARY
</button>

<button type="button" class="btn btn-outline-secondary">SECONDARY
</button>

<button type="button" class="btn btn-outline-success">SUCCESS
</button>

<button type="button" class="btn btn-outline-warning">WARNING
</button>
FAB Buttons
<div>
    
    <button type="button" class="btn btn-danger btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-dark btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-info btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-light btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-primary btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-secondary btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-success btn-fab">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-warning btn-fab">
        <i class="icon-plus"></i>
    </button>
    
</div>
<div>
    
    <button type="button" class="btn btn-danger btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-dark btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-info btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-light btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-primary btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-secondary btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-success btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
    <button type="button" class="btn btn-warning btn-fab btn-sm">
        <i class="icon-plus"></i>
    </button>
    
</div>
Large Size
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
Small Buttons
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Block Level Button
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
Active State

Active state of the buttons

Primary link Link 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Disabled State

Disabled state of the buttons

Primary link Link 
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Toggle State

Toggleable button style

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
</button>
Checkbox Style

Checkbox style button group

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="checkbox" checked autocomplete="off"> Active
    </label>
    <label class="btn btn-secondary">
        <input type="checkbox" autocomplete="off"> Check
    </label>
    <label class="btn btn-secondary">
        <input type="checkbox" autocomplete="off"> Check
    </label>
</div>
Radio Style

Radio style button group

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
</div>
TODAY
Saturday
1 th Jan
Events

Group Meeting

In 32 Minutes, Room 1B

Public Beta Release

11:00 PM

Dinner with David

17:30 PM

Q&A Session

20:30 PM

Notes

Best songs to listen while working

Last edit: May 8th, 2015

Useful subreddits

Last edit: January 12th, 2015

Quick Settings

Notifications

Cloud Sync

Retro Thrusters