Preview:
                     /*        "Components"                */



/*    Buttons        */

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

        <br>
        <br>

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

        <br>
        <br>

        <!-- 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-success" 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 -->
        <button class="btn btn-lg" type="button">
            <i class="fa fa-user"></i> Large button</button>
        <button class="btn btn-sm" type="button">Small button</button>
        <br>
        <br>
        <button class="btn btn-block btn-outline-dark" type="button">Block level button</button>

        <br>
        <br>

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

        <br>
        <br>

        <!-- BUTTON GROUPS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Left</button>
            <button class="btn btn-success" 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>
                <button class="btn btn-primary"  type="button">8</button>
            </div>
        </div>

        <br>
        <br>

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

        <br>
        <br>

        <!-- BUTTON DROPDOWNS -->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
                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>

        <br>
        <br>

        <!-- SPLIT DROPDOWNS -->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">My Button</button>
            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
                <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>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Link Three</a>
            </div>
        </div>
          /*   ---------------------- XX ------------------    */


                          /*     Navbar   */
 <!-- SIMPLE NAVBAR -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    

    <!-- NAVBAR WITH RESPONSIVE TOGGLE -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
         </div>
        </div>
    </nav>
    

    <!-- NAVBAR WITH FORM -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
                <span class="navbar-toggler-icon"> </span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <input class="form-control mr-2" placeholder="Search" type="text">
               <button class="btn btn-outline-success ml-2">Search</button>
            </form>
         </div>
        </div>
    </nav>

    <!-- NAVBAR WITH DROPDOWN -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light mb-5">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item"> Link 1 </a>
                        <a href="#" class="dropdown-item"> Link 2 </a>
                        <a href="#" class="dropdown-item"> Link 3 </a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- COLORS -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white mb-3">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <br>
    <br>

    <!-- FIXED TOP -->
    <nav style='z-index : 1;' class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#" > Navbar Fixed Top </a>
    </nav>

    <!-- FIXED BOTTOM -->
    <!-- FIXED TOP -->
    <nav class="navbar navbar-dark bg-dark fixed-bottom">
        <a class="navbar-brand" href="#" > Navbar Fixed Bottom </a>
    </nav>



    <!-- sticky TOP -->
    <nav style='z-index:2;' class="navbar navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#" > Navbar sticky Top </a>
    </nav>


    <br>
    <br>

    <div class="container">

        <!-- NAVS -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <!-- HORIZONTAL ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>



        <!-- RIGHT ALIGN -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- VERTICAL -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 4</a>
            </li>
        </ul>


        <br>
        <br>

        <!-- FILL & JUSTIFY -->
        <ul style='border:2px solid red;' class="nav nav-pills mt-3 nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
            <li class="nav-item">
                <a class="active nav-link" href="#">Link 4</a>
            </li>
        </ul>
           /*   ---------------------- XX ------------------    */

               /*   List Groups & Badges       */


        <!-- LIST GROUP -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- LIST GROUP WITH LINKS -->
        <ul  class="list-group mb-3">
            <a class="list-group-item" href="#">My List Item One</a>
            <a class="list-group-item" href="#">My List Item Two</a>
            <a class="list-group-item active" href="#">My List Item Three</a>
            <a class="list-group-item" href="#">My List Item Four</a>
            <a class="list-group-item" href="#">My List Item Five</a>
        </ul>


        <!-- CONTEXTUAL CLASSES -->
        <ul class="list-group mb-3">
            <li class="list-group-item">Regular List Item</li>
            <li class="list-group-item list-group-item-primary">Primary List Item</li>
            <li class="list-group-item list-group-item-secondary">Secondary List Item</li>
            <li class="list-group-item list-group-item-success">Success List Item</li>
            <li class="list-group-item list-group-item-info">Info List Item</li>
            <li class="list-group-item list-group-item-warning">Warning List Item</li>
            <li class="list-group-item list-group-item-danger">Danger List Item</li>
            <li class="list-group-item list-group-item-light">Light List Item</li>
            <li class="list-group-item list-group-item-dark">Dark List Item</li>
        </ul>

        <!-- FLUSH LIST GROUP -->
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item active">My List Item Three</li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>


        <!-- BADGE -->
        <ul class="list-group mb-3">
            <li class="list-group-item">My List Item One</li>
            <li class="list-group-item">My List Item Two</li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                My List Item Three
            <span class="badge badge-primary">30</span>
            </li>
            <li class="list-group-item">My List Item Four</li>
            <li class="list-group-item">My List Item Five</li>
        </ul>

        <!-- BREADCRUMB -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item" >Users</li>
        </ol>
        <ol class="breadcrumb">
            <li  class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li  class="breadcrumb-item">
                <a href="#">Users</a>
            </li>
            <li  class="breadcrumb-item" >Brad</li>
        </ol>

           /*   ---------------------- XX ------------------    */

                  /*    Forms         */

 <!-- FORM -->
        <form>
            <!-- TEXT FIELD GROUPS -->
            <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
                <label for="email">Email address</label>
                <input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
                <small class="form-text text-muted">
                    Your email will not ever be shared
                </small>
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
            </div>
            <div class="form-group">
                <label for="company">Company 2 : </label>
                <input class="form-control form-control-sm" type="text" id="company" placeholder="Read only Example" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input class="form-control" type="password" id="password" placeholder="Password">
            </div>
            <!-- SELECT -->
            <div class="form-group">
                <label for="gender">Gender</label>
                <select  class="form-control"  id="gender">
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </div>
            <!-- TEXTAREA -->
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" rows="3"></textarea>
            </div>
            <!-- FILE INPUT -->
            <div class="form-group">
                <label for="file">File input</label>
                <input class="form-control-file" type="file" id="file">
                <small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
            </div>
            <!-- CUSTOM FILE INPUT -->
            <div class="custom-file">
                <input class="custom-file-input" type="file" id="myfile">
                <label class="custom-file-label" for="myfile">Choose file</label>
            </div>
            <br>
            <br>
            <!-- RANGE -->
            <div class="form-group">
                <label for="membership">Membership Level</label>
                <input class="custom-range" type="range" step="1" value='5' min="1" max="5">
            </div>

            <br>

            <button class="btn btn-block btn-primary" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- INLINE FORM -->
        <form class="form-inline">
            <input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
            <input class="form-control mr-2" type="text" id="password" placeholder="Password">
            <div class="form-check">
                <label class="form-check-label mr-2">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>

            <button class="btn btn-light" type="submit">Submit</button>
        </form>

        <br>
        <br>

        <!-- FORM ROW -->
        <form>
            <div class="form-row">
                <div class="col">
                    <input class="form-control" type="text" placeholder="First name">
                </div>
                <div>
                    <input class="form-control" type="text" placeholder="Last name">
                </div>
            </div>
        </form>

        <br>
        <br>

        <!-- VALIDATION -->
        <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control is-valid" type="text" id="username" placeholder="Validation example ( if it's valid )" >
        </div>
        <div class="form-group">
            <label for="username">Username 2 </label>
            <input class="form-control is-invalid" type="text" id="username" placeholder="Validation example ( if Not valid )" >
        </div>
        <div>
            <label for="password">Password</label>
            <input class="form-control is-invalid" type="text" id="password" placeholder="Feedback example  ( below details )">
            <div class="invalid-feedback">
                Password not strong enough
            </div>
        </div>
        <div>
            <label for="password2">Confirm Password</label>
            <input class="form-control" type="text" id="password2">
            <div>
                Password does not match
            </div>
        </div>
/*   ---------------------- XX ------------------    */


         /*   Input Groups & Addons     */

 <!-- BASIC INPUT GROUPS -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input class="form-control" type="text" placeholder="Username">
        </div>

        <br>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username">
            <div class="input-group-append">
                <span class="input-group-text">@something.com</span>
            </div>
        </div>

        <br>

        <label for="basic-url">Custom URL</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">https://something.com/member/</span>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input class="form-control" type="text">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>

        <br>

        <!-- CHECKBOX -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="checkbox">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- RADIO -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <input type="radio">
                </div>
            </div>
            <input type="text" class="form-control">
        </div>

        <br>

        <!-- MULTIPLE INPUTS -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="">Name & Email</span>
            </div>
            <input class="form-control" type="text" placeholder="Full Name">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <br>

        <!-- BUTTON ADDONS -->
        <div class="input-group mb-3">
            <input class="form-control" type="text" placeholder="Find By Name...">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Search</button>
            </div>
        </div>
/*   ---------------------- XX ------------------    */

         /*    Alerts & Progress Bars     */


        <!-- ALERTS -->
        <div class="alert alert-primary">
            <strong>Primary</strong> Blog post added
        </div>

        <div class="alert alert-secondary">
            <strong>Secondary</strong> Blog post added
        </div>

        <div class="alert alert-success">
            <strong>Success</strong> Blog post added
        </div>

        <div class="alert alert-danger">
            <strong>Danger</strong> Please check the log files
        </div>

        <div class="alert alert-info">
            <strong>Info</strong> You have a new message
        </div>

        <div class="alert alert-warning">
            <strong>Warning</strong> Please check the log files
        </div>

        <div class="alert alert-light">
            <strong>Light</strong> Please check the log files
        </div>

        <div class="alert alert-dark">
            <strong>Dark</strong> Please check the log files
        </div>


        <!-- DISMISSABLE ALERT -->
        <div class="alert alert-success alert-dismissible">
            <button class="close" type="button" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <strong>Dismissable</strong> Blog post added
        </div>

        <!-- EXTRA CONTENT -->
        <div class="alert alert-success">
            <h4 class="alert-heading">Congrats!</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam commodi
                ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam? Cumque</p>
            <hr>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
        </div>

        <br>
        <br>

        <!-- PROGRESS BARS -->
        <div class="progress">
            <div class="progress-bar" style='width:35%'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar" style='width:80%'>80%</div>
        </div>
        <br>
        <!-- STRIPED -->
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-striped" style='width : 70%;'></div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar bg-warning progress-bar-striped" style='width : 90%'>90%</div>
        </div>

        <!-- HEIGHT -->
        <div class="progress my-3" style="height:2px">
            <div class="progress-bar bg-success" style='width : 60%'></div>
        </div>
        <br>
        <!-- ANIMATED -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style='width:60%;'></div>
        </div>
        <div class="progress mt-3">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style='width:90%;'>90%</div>
        </div>

        <br>
        <!-- MULTIPLE BARS -->
        <div class="progress">
            <div class="progress-bar bg-warning" style='width:15%;'></div>
            <div class="progress-bar bg-success" style='width:25%;'>25%</div>
            <div class="progress-bar bg-primary  progress-bar-striped progress-bar-animated" style='width:10%;'>Loading Amigo</div>
        </div>
/*   ---------------------- XX ----------------
--    */

                
                /*  Tables & Pagination          */
                
        <!-- TABLE -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>jdoe@gmail.com</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Will</td>
                    <td>Johnson</td>
                    <td>will@yahoo.com</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Shannon</td>
                    <td>Williams</td>
                    <td>shannon@yahoo.com</td>
                </tr>
            </tbody>
        </table>

        <br>

        <!-- INVERSE/DARK TABLE -->
        <table class="table table-dark">
        </table>

        <br>

        <!-- TABLE HEAD INVERSE -->
        <table class="table">
            <thead class="thead-dark">
            </thead>
        </table>

        <br>

        <!-- STRIPED TABLE -->
        <table class="table table-striped">
        </table>

        <!-- BORDERED TABLE -->
        <table class="table table-bordered">
        </table>

        <br>

        <!-- BORDERLESS TABLE -->
        <table class="table table-borderless">
        </table>

        <br>

        <!-- HOVERABLE -->
        <table class="table table-hover">
        </table>

        <br>

        <!-- CONTEXTUAL CLASSES -->
        <table class="table">
        </table>

        <br>

        <!-- SMALL TABLE -->
        <table class="table table-sm table-hover table-striped">
        </table>

        <br>

        <!-- RESPONSIVE TABLE - Scrollbars -->
        <div class="table-responsive">
            <table class="table">
            </table>
        </div>

        <br>
        <br>

        <!-- PAGINATION -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- PAGINATION CENTERED -->
        <nav>
            <ul class="pagination justify-content-center">
            </ul>
        </nav>


        <!-- PAGINATION RIGHT -->
        <nav>
            <ul class="pagination justify-content-end">
                </li>
            </ul>
        </nav>



        <!-- PAGINATION LARGE -->
        <nav>
            <ul class="pagination pagination-lg">
            </ul>
        </nav>



        <!-- PAGINATION SMALL -->
        <nav>
            <ul class="pagination pagination-sm">
            </ul>
        </nav>


        <!-- WITH ARROWS -->
        <nav>
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#">  
                     <span>&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item active">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">
                    <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>                
                
/*   ---------------------- XX ------------------    */
/*   Cards  */
        <!-- BLOCK -->
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
            </div>
        </div>

        <br>
        <br>

        <!-- SIMPLE CARD -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle text-muted">Card subtitle</h6>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-outline-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH IMAGE -->
        <div class="card">
            <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                <a class="btn btn-success btn-block" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH HEADER -->
        <div class="card">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-danger" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- HEADER, FOOTER, CENTERED -->
        <div class="card text-center">
            <div class="card-header">
                My Card
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-dark" href="#">Read More</a>
            </div>
            <div class="card-footer text-muted">
                2 Days Ago
            </div>
        </div>

        <br>
        <br>

        <!-- CARD WITH NAV -->
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
                <a class="btn btn-primary" href="#">Read More</a>
            </div>
        </div>

        <br>
        <br>

        <!-- IMAGE OVERLAYS -->
        <div class="text-white card">
            <img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
            <div class="card-img-overlay">
                <h4 class="card-text">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content
                    is a little bit longer.</p>
                <p class="card-text">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </p>
            </div>
        </div>


        <br>
        <br>

        <!-- BACKGROUND COLOR -->
        <div class="card bg-primary text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card bg-danger text-white mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD OUTLINE -->
        <div class="card border-primary mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-danger mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>

        <div class="card border-info mb-3">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
        <br>
        <br>

        <!-- CARD GROUP -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>


        <br>
        <br>

        <!-- CARD DECK -->
        <div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
            <div>
                <div>
                    <h4>Card Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- CARD COLUMNS -->
        <!-- CARD COLUMNS -->
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title that wraps to a new line</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content
                        is a little bit longer.</p>
                </div>
            </div>
            <div class="card p-3">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer>
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card bg-dark text-white p-3">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.
                    </p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
            </div>
            <div class="card p-3 text-right">
                <blockquote class="card-bodyquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">
                        <small>
                            Someone famous in
                            <cite title="Source Title">Source Title</cite>
                        </small>
                    </footer>
                </blockquote>
            </div>
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card
                        has even longer content than the first to show that equal height action.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 3 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
                
/*   ---------------------- XX ------------------    */

                
         /*   Media Object   */
                
        <!-- MEDIA OBJECT -->
        <div class="media">
            <img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.
            </div>
        </div>

        <br>
        <br>

        <!-- NESTING MEDIA OBJECTS -->
        <div class="media">
            <img class="mr-3" src="https://source.unsplash.com/random/90x91">
            <div class="media-body">
                <h5>Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
                felis in faucibus.

                <div class="media mt-4">
                    <a href="#" class="pr-4">
                        <img src="https://source.unsplash.com/random/90x92">
                    </a>
                    <div class="media-body">
                        <h5>Nested Media</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                        vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                        congue felis in faucibus.
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>

        <!-- TOP ALIGNED (DEFAULT) -->
        <div class="media">
            <img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
            <div class="media-body">
                <h5>Top aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- CENTER ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
            <div class="media-body">
                <h5>Center aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>

        <!-- BOTTOM ALIGNED -->
        <div class="media">
            <img  class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
            <div class="media-body">
                <h5>Bottom aligned media</h5>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                    Donec lacinia congue felis in faucibus.</p>
            </div>
        </div>

        <br>
        <br>
<hr>
        <!-- MEDIA LIST -->
        <ul class="list-unstyled">
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x96">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x97">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
            <li class="media">
                <img class="mr-3" src="https://source.unsplash.com/random/90x98">
                <div class="media-body">
                    <h5>List based media object</h5>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
                    vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                    congue felis in faucibus.
                </div>
            </li>
        </ul>


     /* --------------- XX ----------- */

       /*     Jumbotron        */


    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
      <h1 class="display-4">Welcome To My Website!</h1>
      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus perspiciatis cum vitae, modi hic?</p>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quibusdam.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Read More</a>
    </div>

    <br>


  </div>
  <!-- ./container -->

  <!-- FLUID JUMBOTRON -->
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Fluid Jumbotron</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas recusandae voluptatibus, natus architecto asperiores
        a.
      </p>
    </div>
  </div>


     /* --------------- XX ----------- */
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter