Basic Example
@


@example.com


https://example.com/users/


$ .00


$ 0.00

                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                           aria-describedby="basic-addon1">
                </div>
                <br>
                <br>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Recipient's username"
                           aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <span class="input-group-addon" id="basic-addon2">@example.com</span>
                </div>
                <br>
                <br>
                <label for="basic-url">Your vanity URL</label>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
                    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
                </div>
                <br>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                    <span class="input-group-addon">.00</span>
                </div>
                <br>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <span class="input-group-addon">0.00</span>
                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                </div>
                
Sizing
@

@

                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                           aria-describedby="sizing-addon1">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" id="sizing-addon2">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-label="Username"
                           aria-describedby="sizing-addon2">
                </div>
                
Checkboxes and Radio Addons

                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                             <label class="form-check-label">
                                <input class="form-check-input" type="checkbox"
                                       aria-label="Checkbox for following text input"/>
                                <span class="checkbox-icon"></span>
                            </label>
                            </span>
                            <input type="text" class="form-control" aria-label="Text input with checkbox">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                                  <label class="form-check-label">
                                 <input class="form-check-input" type="radio"
                                        aria-label="Radio button for following text input">
                                <span class="radio-icon"></span>
                            </label>
                            </span>
                            <input type="text" class="form-control" aria-label="Text input with radio button">
                        </div>
                    </div>
                </div>
                
Multiple Addons
$
$ 0.00

                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                             <label class="form-check-label">
                                <input class="form-check-input" type="checkbox"
                                       aria-label="Checkbox for following text input"/>
                                <span class="checkbox-icon"></span>
                            </label>
                            </span>
                            <span class="input-group-addon">$</span>
                            <input type="text" class="form-control" aria-label="Text input with checkbox">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <span class="input-group-addon">0.00</span>
                            <input type="text" class="form-control" aria-label="Text input with radio button">
                        </div>
                    </div>
                </div>
                
Button Addons


                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button">Go!</button>
                            </span>
                            <input type="text" class="form-control" placeholder="Search for..."
                                   aria-label="Search for...">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for..."
                                   aria-label="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button">Go!</button>
                            </span>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-offset-3 col-lg-6">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button">Hate it</button>
                            </span>
                            <input type="text" class="form-control" placeholder="Product name"
                                   aria-label="Product name">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button">Love it</button>
                            </span>
                        </div>
                    </div>
                </div>
                
Buttons with Dropdowns

                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    Action
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <input type="text" class="form-control" aria-label="Text input with dropdown button">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" aria-label="Text input with dropdown button">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    Action
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
Segmented Buttons

                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-secondary">Action</button>
                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <input type="text" class="form-control"
                                   aria-label="Text input with segmented button dropdown">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control"
                                   aria-label="Text input with segmented button dropdown">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-secondary">Action</button>
                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div role="separator" class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </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