Button elements

                
                    <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-danger">Danger</button>
                
                    <button type="button" class="btn btn-warning">Warning</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-dark">Dark</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-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-danger">Danger
                    </button>
                
                    <button type="button" class="btn btn-outline-warning">Warning
                    </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-dark">Dark
                    </button>
                
                
FAB Buttons

                <div>
                    
                        <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-danger btn-fab">
                            <i class="icon-plus"></i>
                        </button>
                    
                        <button type="button" class="btn btn-warning 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-dark btn-fab">
                            <i class="icon-plus"></i>
                        </button>
                    
                </div>
                <div>
                    
                        <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-danger 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>
                    
                        <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-dark 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


                <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" data-toggle="buttons">
                    <label class="btn btn-secondary active">
                        <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
                    </label>
                    <label class="btn btn-secondary">
                        <input type="checkbox" autocomplete="off"> Checkbox 2
                    </label>
                    <label class="btn btn-secondary">
                        <input type="checkbox" autocomplete="off"> Checkbox 3
                    </label>
                </div>
                
Radio Style

Radio style button group


                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-secondary active">
                        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
                        (preselected)
                    </label>
                    <label class="btn btn-secondary">
                        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                    </label>
                    <label class="btn btn-secondary">
                        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                    </label>
                </div>
                
TODAY
Monday
18 th Sep
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