Cacher is the code snippet organizer for pro developers

        <!-- BUTTONS -->
        <!-- nupu kujundamiseks bs'le omaseks annan klassi btn -->
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-secondary" type="button">Secondary</button>
        <button class="btn btn-success" type="button">Success</button>
        <button class="btn btn-info" type="button">Info</button>
        <button class="btn btn-warning" type="button">Warning</button>
        <button class="btn btn-danger" type="button">Danger</button>
        <button class="btn btn-light" type="button">Light</button>
        <button class="btn btn-dark" type="button">Dark</button>
        <button class="btn btn-link" type="button">Link</button>

        <br>
        <br>

        <!-- BUTTON TAGS/TYPES -->
        <!-- Nupu kujunduse võib anda pmst igale elemendiel andes sellele klassi btn ja vastavad kujundusklassid -->
        <a href="#" role="button">Link</a>
        <button type="submit">Button</button>
        <input type="button" value="Input">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">

        <br>
        <br>

        <!-- OUTLINE BUTTONS -->
        <!-- annab nupule sinise piirjoone, mis hoveriga võtab taust omaks piirjoone värvi -->
        <button class="btn btn-outline-primary" type="button">Primary Outline</button>
        <button class="btn btn-outline-secondary" type="button">Secondary Outline</button>
        <button class="btn btn-outline-success" type="button">Success Outline</button>
        <button class="btn btn-outline-info" type="button">Info Outline</button>
        <button class="btn btn-outline-warning" type="button">Warning Outline</button>
        <button class="btn btn-outline-danger" type="button">Danger Outline</button>
        <button class="btn btn-outline-light" type="button">Light Outline</button>
        <button class="btn btn-outline-dark" type="button">Dark Outline</button>

        <br>
        <br>

        <!-- BUTTON SIZES -->
        <!-- saame anda suuruse ja laiuse -->
        <button class="btn btn-primary btn-lg" type="button">
            <i class="fa fa-user"></i> Large button</button>
        <button class="btn btn-success btn-sm" type="button">Small button</button>
        <br>
        <br>
        <button class="btn btn-dark btn-block" type="button">Block level button</button>

        <br>
        <br>

        <!-- STATES -->
        <!-- Saab reguleerida seisundit -->
        <button class="btn btn-primary" type="button">Regular Button</button>
        <button class="btn btn-primary active" type="button">Active Button</button>
        <button class="btn btn-primary disabled" type="button">Disabled Button</button>
        <!-- pmst nagu lüliti fn -->
        <button class="btn btn-primary" type="button" data-toggle="button">
            Toggle State
        </button>

        <br>
        <br>

        <!-- BUTTON GROUPS -->
        <!-- Nuppe saab grupeerida -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-primary" type="button">Middle</button>
            <button class="btn btn-primary" type="button">Right</button>
        </div>

        <br></br>

        <!-- BUTTON TOOLBAR -->
        <div class="btn-toolbar">
            <div class="btn-group mr-2">
                <button class="btn btn-primary" type="button">1</button>
                <button class="btn btn-primary" type="button">2</button>
                <button class="btn btn-primary" type="button">3</button>
                <button class="btn btn-primary" type="button">4</button>
            </div>
            <div class="btn-group mr-2">
                <button class="btn btn-primary" type="button">5</button>
                <button class="btn btn-primary" type="button">6</button>
                <button class="btn btn-primary" type="button">7</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary"  type="button">8</button>
            </div>
        </div>

        <br>
        <br>

        <!-- VERTICAL GROUP -->
        <div class="btn-group-vertical">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-primary" type="button">Middle</button>
            <button class="btn btn-primary" type="button">Right</button>
        </div>

        <br>
        <br>

        <!-- BUTTON DROPDOWNS -->
        <div class="dropdpwn">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                My Dropdown
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link One</a>
                <a class="dropdown-item" href="#">Link Two</a>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>