Bootstrap/basics/basics.html

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Basics</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Bootstrap</h1>
        <div class="jumbotron">
            <h1>This is a jumbotron</h1>
            <p>
                Fashion axe cardigan air plant meh shabby chic raw denim occupy pour-over. Blue bottle meditation thundercats tilde affogato flannel craft beer PBR&B waistcoat twee raclette YOLO heirloom listicle. Everyday carry chartreuse artisan put a bird on it, authentic twee venmo typewriter semiotics etsy poke. Single-origin coffee master cleanse vegan everyday carry VHS roof party. Poutine umami ennui celiac pop-up. Blue bottle jianbing food truck squid deep v meggings hot chicken truffaut mlkshk shoreditch vape. Hexagon farm-to-table cardigan tofu man braid. Cray blue bottle occupy, forage gastropub ugh PBR&B four dollar toast meditation cornhole you probably haven't heard of them man bun put a bird on it. Edison bulb narwhal meditation pickled glossier health goth pinterest adaptogen prism mumblecore photo booth cred cronut sartorial. Irony pickled mumblecore butcher yr. Edison bulb cardigan artisan shaman vaporware small batch. Af listicle ugh chartreuse. Tousled VHS copper mug listicle, dreamcatcher meditation craft beer selvage 90's jianbing fingerstache blog. Cardigan shoreditch literally salvia banh mi.
            </p>
            <button class="btn btn-success">Hi there</button>
        </div>
        <button class="btn btn-danger btn-xs">CLICK ME</button>
        <button class="btn btn-success btn-xs active">CLICK ME</button>
        <button class="btn btn-success btn-xs disabled">CLICK ME</button>
        <a href="http://www.getbootstrap.com" class="btn btn-info btn-lg">Bootstrap Docs</a>
        <hr>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <!-- inline form -->
        <hr>
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">Name</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
            </div>
            <button type="submit" class="btn btn-default">Send invitation</button>
        </form>
    </div>
</body>

</html>