1.buttons & button groups

• buttons

<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>

• button tags/types

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-light" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<input class="btn btn-info" type="reset" value="Reset">

• outline buttons

<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>

• button sizes

<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>

• states

<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>

<button class="btn btn-primary" data-toggle="button" type="button">
    Toggle State
</button>

• button groups

<div class="btn-group">
    <button class="btn btn-primary" type="button">Left</button>
    <button class="btn btn-secondary" type="button">Middle</button>
    <button class="btn btn-primary" type="button">Right</button>
</div>

• 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>

• vertical group

<div class="btn-group-vertical">
    <button class="btn btn-primary" type="button">Top</button>
    <button class="btn btn-primary" type="button">Middle</button>
    <button class="btn btn-primary" type="button">Bottom</button>
</div>

• button dropdowns

<div class="dropdown">
    <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>

• split dropdowns

<div class="btn-group">
    <button class="btn btn-primary" type="button">My Button</button>
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        <span>Toggle Dropdown</span>
    </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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Link Four</a>
    </div>
</div>