<template>
    <BaseLayout>
        <main class="content">

            <div class="container-fluid example-container">
                <h1>Brand color</h1>

                <div class="mt-3 mb-5">
                    <h3>Theme colors</h3>
                    <div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
                    <div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
                    <div class="p-2 mb-2 bg-success text-white">.bg-success</div>
                    <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
                    <div class="p-2 mb-2 bg-warning text-white">.bg-warning</div>
                    <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
                    <div class="p-2 mb-2 bg-light text-gray-dark">.bg-light</div>
                    <div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
                    <div class="p-2 mb-2 bg-white text-gray-dark">.bg-white</div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Gradient of grey</h3>
                    <div class="p-2 mb-2 swatch-100">.swatch-100</div>
                    <div class="p-2 mb-2 swatch-200">.swatch-200</div>
                    <div class="p-2 mb-2 swatch-300">.swatch-300</div>
                    <div class="p-2 mb-2 swatch-400">.swatch-400</div>
                    <div class="p-2 mb-2 swatch-500">.swatch-500</div>
                    <div class="p-2 mb-2 swatch-600">.swatch-600</div>
                    <div class="p-2 mb-2 swatch-700">.swatch-700</div>
                    <div class="p-2 mb-2 swatch-800">.swatch-800</div>
                    <div class="p-2 mb-2 swatch-900">.swatch-900</div>
                </div>
            </div>

            <!-- Links  -->
            <div class="container-fluid example-container" data-category="links">
                <h1>Links</h1>

                <div class="mt-3 mb-5">
                    <h3>Default Link</h3>
                    <a href="javascript:void(0);">Exemple link</a>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Link inside an alert</h3>
                    <div class="alert alert-primary" role="alert">
                        This is a primary alert with
                        <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you
                        like.
                    </div>
                </div>
            </div>

            <!-- Grid  -->
            <div class="container-fluid example-container" data-category="grid">
                <h1>Grid</h1>

                <div>
                    <div class="bs-example-row">
                        <!-- Bootstrap Grid -->
                        <div class="row">
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                            <div class="col-sm-1">.col-sm-1</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-2">.col-sm-2</div>
                            <div class="col-sm-3">.col-sm-3</div>
                            <div class="col-sm-7">.col-sm-7</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">.col-sm-4</div>
                            <div class="col-sm-4">.col-sm-4</div>
                            <div class="col-sm-4">.col-sm-4</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5">.col-sm-5</div>
                            <div class="col-sm-7">.col-sm-7</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">.col-sm-6</div>
                            <div class="col-sm-6">.col-sm-6</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">.col-sm-12</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fonts  -->
            <div class="container-fluid example-container" data-category="fonts">
                <h1>Fonts</h1>

                <div>
                    <h1>h1 </h1>
                    <h2>h2 </h2>
                    <h3>h3 </h3>
                    <h4>h4 </h4>
                    <h5>h5 </h5>
                    <h6>h6 </h6>

                    <br>

                    <h1>Heading 1
                        <small>Sub-heading</small>
                    </h1>
                    <h2>Heading 2
                        <small>Sub-heading</small>
                    </h2>
                    <h3>Heading 3
                        <small>Sub-heading</small>
                    </h3>
                    <h4>Heading 4
                        <small>Sub-heading</small>
                    </h4>
                    <h5>Heading 5
                        <small>Sub-heading</small>
                    </h5>
                    <h6>Heading 6
                        <small>Sub-heading</small>
                    </h6>

                    <br>

                    <h1 class="display-1">Display 1</h1>
                    <h1 class="display-2">Display 2</h1>
                    <h1 class="display-3">Display 3</h1>
                    <h1 class="display-4">Display 4</h1>

                    <br>

                    <p class="lead">
                        This is the article lead &mdash; it stands out at the start of the article.
                    </p>

                    <p>
                        This is normal text at the normal size etc...
                    </p>

                    <p>Sample
                        <mark>marked text</mark>
                        .
                    </p>

                    <br>
                    <blockquote class="blockquote">
                        <p>The most important moment of your life is now. The most important person in your life is the
                            one you are with now,
                            and the most important activity in your life is the one you are involved with now.</p>
                    </blockquote>
                </div>
            </div>


            <!-- Buttons  -->
            <div class="container-fluid example-container" data-category="buttons">
                <h1>Buttons</h1>

                <div class="mt-3 mb-5">
                    <h3>Default buttons</h3>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-secondary">Secondary</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                    <button type="button" class="btn btn-light">Light</button>
                    <button type="button" class="btn btn-dark">Dark</button>
                    <button type="button" class="btn btn-link">Link</button>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Buttons with outline</h3>
                    <button type="button" class="btn btn-outline-primary">Primary</button>
                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                    <button type="button" class="btn btn-outline-info">Info</button>
                    <button type="button" class="btn btn-outline-success">Success</button>
                    <button type="button" class="btn btn-outline-warning">Warning</button>
                    <button type="button" class="btn btn-outline-danger">Danger</button>
                    <button type="button" class="btn btn-outline-light">Light</button>
                    <button type="button" class="btn btn-outline-dark">Dark</button>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Buttons sizes</h3>
                    <button type="button" class="btn btn-success btn-sm">Small</button>
                    <button type="button" class="btn btn-success">Default</button>
                    <button type="button" class="btn btn-success btn-lg">Large</button>

                    <br>

                    <button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Disabled button</h3>
                    <p>
                        <a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a'
                            Element</a>
                    </p>

                    <p>
                        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element
                        </button>
                    </p>

                    <p>
                        <input type="button" class="btn btn-lg btn-primary" disabled="disabled"
                               value="The 'input' Element">
                    </p>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Checkbox buttons</h3>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-primary active">
                            <input type="checkbox" checked autocomplete="off"> Boots
                        </label>
                        <label class="btn btn-primary">
                            <input type="checkbox" autocomplete="off"> Shoes
                        </label>
                        <label class="btn btn-primary">
                            <input type="checkbox" autocomplete="off"> Feet
                        </label>
                    </div>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Radio buttons</h3>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="boots" autocomplete="off" checked> Boots
                        </label>
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="shoes" autocomplete="off"> Shoes
                        </label>
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="feet" autocomplete="off"> Feet
                        </label>
                    </div>
                </div>
            </div>

            <!-- Forms  -->
            <div class="container-fluid example-container" data-category="forms">
                <h1>Forms</h1>


                <div class="mt-3 mb-5">
                    <h3>Default form group</h3>
                    <form action="javascript:void(0);">
                        <fieldset class="form-group">
                            <label for="first_name">First Name</label>
                            <input type="text" class="form-control" id="first_name" name="first_name">
                        </fieldset>
                        <fieldset class="form-group">
                            <label for="last_name">Last Name</label>
                            <input type="text" class="form-control" id="last_name" name="last_name">
                        </fieldset>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>

                <h3>Inline form</h3>

                <div class="mt-3 mb-5">
                    <form action="javascript:void(0);" class="form-inline">
                        <label class="mr-sm-2 mb-0" for="first_name">First Name</label>
                        <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
                        <label class="mr-sm-2 mb-0" for="last_name">Last Name</label>
                        <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
                        <button type="submit" class="btn btn-default mt-2 mt-sm-0">Submit</button>
                    </form>
                </div>

                <h3>Aligned form</h3>

                <div class="mt-3 mb-5">
                    <div class="container">
                        <form action="javascript:void(0);">
                            <div class="form-group row">
                                <label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
                                <div class="col-xs-9">
                                    <input type="text" class="form-control" id="first_name" name="first_name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
                                <div class="col-xs-9">
                                    <input type="text" class="form-control" id="last_name" name="last_name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="offset-xs-3 col-xs-9">
                                    <button type="submit" class="btn btn-default">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div>
                    <div class="container">
                        <form action="javascript:void(0);">
                            <fieldset class="form-group">
                                <div class="row">
                                    <legend class="col-form-legend col-3">Fruit</legend>
                                    <div class="col-9">
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="legendRadio"
                                                       id="legendRadio1" value="1"> Apple
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="legendRadio"
                                                       id="legendRadio2" value="2" checked> Orange
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="legendRadio"
                                                       id="legendRadio3" value="3"> Watermelon
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <div class="form-group row">
                                <label for="first_name" class="col-3 col-form-label">First Name</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" id="first_name" name="first_name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="last_name" class="col-3 col-form-label">Last Name</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" id="last_name" name="last_name">
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="offset-3 col-9">
                                    <button type="submit" class="btn btn-default">Submit</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

                <h3>Form with help text </h3>

                <div class="mt-3 mb-5">
                    <label for="accountId">Account Id</label>
                    <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
                    <span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
                </div>

                <h3>Checkbox and radio </h3>

                <div class="mt-3 mb-5">
                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> 1
                        </label>
                    </div>

                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> 2
                        </label>
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> 3
                        </label>
                    </div>

                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                                   value="1"> 1
                        </label>
                    </div>

                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                                   value="2"> 2
                        </label>
                    </div>

                    <div class="form-check form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
                                   value="3"> 3
                        </label>
                    </div>
                </div>
            </div>

            <!-- Dropdown  -->
            <div class="container-fluid example-container" data-category="dropdown">
                <h1>Dropdown</h1>

                <div class="row">
                    <div style="position: relative" class="mt-3 mb-5 col-4">
                        <h3>Default dropdown</h3>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                    data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                Dropdown button
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Another action</a>
                                <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
                            </div>

                        </div>
                    </div>
                    <div class="mt-3 mb-5 col-4">
                        <h3>Dropdown with menu</h3>
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                About Us
                            </button>
                            <div class="dropdown-menu" aria-labelledby="about-us">
                                <h6 class="dropdown-header">Company Information</h6>
                                <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
                                <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
                                <h6 class="dropdown-header">Contact Us</h6>
                                <a class="dropdown-item" href="javascript:void(0);">Call Center</a>
                                <a class="dropdown-item" href="javascript:void(0);">Store Locations</a>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 mb-5 col-4">
                        <h3>Dropdown with divider</h3>
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                About Us
                            </button>
                            <div class="dropdown-menu" aria-labelledby="about-us">
                                <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
                                <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void(0);">Contact Us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navs  -->
            <div class="container-fluid example-container" data-category="navs">
                <h1>Navs</h1>

                <h3>Default nav</h3>

                <div class="mt-3 mb-5">
                    <ul class="nav">

                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
                        </li>

                    </ul>
                </div>

                <h3>Horizontal menu</h3>

                <div class="mt-3 mb-5">
                    <nav class="nav flex-column">
                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
                        <a class="nav-link" href="javascript:void(0);">CSS</a>
                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                        <a class="nav-link" href="javascript:void(0);">Preview</a>
                    </nav>
                </div>

                <h3>Nav with tabs</h3>

                <div class="mt-3 mb-5">
                    <ul class="nav nav-tabs">

                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
                        </li>

                    </ul>
                </div>

                <h3>Nav with pills</h3>

                <div class="mt-3 mb-5">
                    <ul class="nav nav-pills">

                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
                        </li>

                    </ul>
                </div>

                <h3>Horizontal nav with pills</h3>

                <div class="mt-3 mb-5">
                    <ul class="nav nav-pills flex-column">

                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
                        </li>

                    </ul>
                </div>

                <h3>Nav with tabs and dropdown</h3>

                <div class="mt-3 mb-5">
                    <ul id="clothing-nav" class="nav nav-tabs" role="tablist">

                        <li class="nav-item">
                            <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab"
                               aria-controls="home" aria-expanded="true">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab"
                               aria-controls="hats">Hats</a>
                        </li>

                        <!-- Dropdown -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"
                               role="button" aria-haspopup="true"
                               aria-expanded="false">
                                Footwear
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab"
                                   data-toggle="tab" aria-controls="dropdownShoes">Shoes</a>
                                <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab"
                                   data-toggle="tab" aria-controls="dropdownBoots">Boots</a>
                            </div>
                        </li>

                    </ul>

                    <!-- Content Panel -->
                    <div id="clothing-nav-content" class="tab-content">

                        <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
                            <p>Welcome home! Click on the tabs to see the content change.</p>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
                            <p>A hat is a head covering. It can be worn for protection against the elements, ceremonial
                                reasons, religious reasons,
                                safety, or as a fashion accessory.</p>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes"
                             aria-labelledby="dropdown-shoes-tab">
                            <p>A shoe is an item of footwear intended to protect and comfort the human foot while doing
                                various activities. Shoes
                                are also used as an item of decoration.</p>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="dropdown-boots"
                             aria-labelledby="dropdown-boots-tab">
                            <p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the
                                foot and the ankle, while
                                some also cover some part of the lower calf. Some boots extend up the leg, sometimes as
                                far as the knee or even
                                the hip.
                            </p>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Navbar  -->
            <div class="container-fluid example-container" data-category="navbar">
                <h1>Navbar</h1>

                <div class="mt-3 mb-5">
                    <nav class="navbar navbar-expand-sm navbar-light bg-faded">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
                                aria-controls="nav-content"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- Brand -->
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>

                        <!-- Links -->
                        <div class="collapse navbar-collapse" id="nav-content">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
                                </li>
                                <li class="nav-item active">
                                    <a class="nav-link" href="javascript:void(0);">Link 2
                                        <span class="sr-only">(current)</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
                                </li>
                            </ul>
                        </div>
                    </nav>

                </div>
                <div class="mt-3 mb-5">
                    <nav class="navbar navbar-expand-sm navbar-light bg-primary">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
                                aria-controls="nav-content"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- Brand -->
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>

                        <!-- Links -->
                        <div class="collapse navbar-collapse" id="nav-content">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 2</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
                                </li>
                            </ul>
                        </div>
                    </nav>

                </div>

                <div class="mt-3 mb-5">
                    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
                                aria-controls="nav-content"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <!-- Brand -->
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>

                        <!-- Links -->
                        <div class="collapse navbar-collapse" id="nav-content">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 2</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>


            <!-- Tables  -->
            <div class="container-fluid example-container" data-category="tables">
                <h1>Tables</h1>

                <div class="mt-3 mb-5">
                    <h3>Default table</h3>
                    <div>
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Footer 1</th>
                                <th>Footer 2</th>
                                <th>Footer 3</th>
                            </tr>
                            </tfoot>
                            <tbody>
                            <tr>
                                <td>Cell</td>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <td>Cell</td>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            <tr>
                                <td>Cell</td>
                                <td>Cell</td>
                                <td>Cell</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Table inverse</h3>
                    <table class="table table-inverse">
                        <thead>
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Table striped</h3>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Table with border</h3>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Table with hover</h3>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Table with Head with default color</h3>
                    <table class="table">
                        <thead class="thead-default">
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Table with inverse Head color</h3>
                    <table class="table">
                        <thead class="thead-inverse">
                        <tr>
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Footer 1</th>
                            <th>Footer 2</th>
                            <th>Footer 3</th>
                        </tr>
                        </tfoot>
                        <tbody>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pagination  -->
            <div class="container-fluid example-container" data-category="pagination">
                <h1>Pagination</h1>

                <div class="mt-3 mb-5">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">3</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">4</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">5</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">6</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">7</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="mt-3 mb-5">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">3</a>
                            </li>
                            <li class="page-item active">
                                <a href="javascript:void(0);" class="page-link">4</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">5</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">6</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">7</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="mt-3 mb-5">
                    <nav>
                        <ul class="pagination pagination-lg">
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">3</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">4</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">5</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">6</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">7</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="mt-3 mb-5">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">3</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">4</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">5</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">6</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">7</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="mt-3 mb-5">
                    <nav>
                        <ul class="pagination pagination-sm">
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">1</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">2</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">3</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">4</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">5</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">6</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link">7</a>
                            </li>
                            <li class="page-item">
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- Jumbotron  -->
            <div class="container-fluid example-container" data-category="jumbotron">
                <h1>Jumbotron</h1>

                <div class="container">
                    <div class="jumbotron">
                        <h1>Container size jumboton</h1>
                        <p>Think BIG with a Bootstrap Jumbotron!</p>
                    </div>
                </div>

                <div>
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container">
                            <h1>Container fluid size jumbotron</h1>
                            <p>Think BIG with a Bootstrap Jumbotron!</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cards  -->
            <div class="container-fluid example-container" data-category="cards">
                <h1>Cards</h1>
                <div class="row mb-3">
                    <div class="col-3">
                        <div class="card card-body">
                            <h4 class="card-title">Boot Polish</h4>
                            <p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine,
                                and waterproof leather shoes or boots to extend
                                the footwear's life, and restore, maintain and improve their appearance.</p>
                            <a href="javascript:void(0);" class="btn btn-primary">More</a>
                        </div>
                    </div>

                    <div class="col-3">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Sun Gone</h4>
                                <p class="card-text">Here are the top resources for all things related to the Sun.</p>
                                <a href="javascript:void(0);" class="card-link">Sun Gone</a>
                                <a href="javascript:void(0);" class="card-link">Still Gone</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-3">
                        <div class="card text-center">
                            <div class="card-body">
                                <h4 class="card-title">Sun Gone</h4>
                                <h6 class="card-subtitle text-muted">Sun disappears!</h6>
                            </div>
                            <img src="https://via.placeholder.com/300x150" alt="Photo of sunset">

                            <div class="card-body">
                                <p class="card-text">The sun disappeared behind the horizon today. Experts claim it
                                    could be gone for good!</p>
                                <a href="javascript:void(0);" class="btn btn-primary">Full Report</a>
                            </div>

                        </div>
                    </div>

                    <div class="col-3">
                        <div class="card">
                            <div class="card-header">
                                Sponsored Content
                            </div>
                            <div class="card-body">
                                <h4 class="card-title">Ugg Boots</h4>
                                <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer
                                    service.</p>
                            </div>
                            <div class="card-footer">
                                By boots.com
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="card-group">
                            <div class="card">
                                <div class="card-header">Sun Gone</div>
                                <div class="card-body">
                                    <p class="card-text">The top resources for all things related to the Sun.</p>
                                    <a href="javascript:void(0);" class="card-link">Sun Gone</a>
                                    <a href="javascript:void(0);" class="card-link">Still Gone</a>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">Sun Up</div>
                                <div class="card-body">
                                    <p class="card-text">Looks like the Sun has returned. Here's
                                        <a href="javascript:void(0);" class="card-link">why</a>.</p>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <!-- Tooltip  -->
            <div class="container-fluid example-container" data-category="tooltip">
                <h1>Tooltip</h1>

                <div class="mt-3 mb-5">
                    <h3>Inline tooltip</h3>
                    <p style="margin:40px;">Check out my
                        <a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
                           title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you
                        might need it!</p>
                </div>

                <div class="mt-3 mb-5">
                    <h3>All position tooltip</h3>
                    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top"
                            title="Top shoes" style="margin:20px;">
                        Shoes
                    </button>
                    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right"
                            title="Right boot" style="margin:20px;">
                        Boots
                    </button>
                    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom"
                            title="Bottom uggs" style="margin:20px;">
                        Ugg
                    </button>
                    <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left"
                            title="Left sock" style="margin:20px;">
                        Socks
                    </button>
                </div>

            </div>

            <!-- Popovers  -->
            <div class="container-fluid example-container" data-category="popovers">
                <h1>Popovers</h1>
                <div class="mt-3 mb-5">
                    <h3>All popover position</h3>
                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                            data-placement="top"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on top
                    </button>

                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                            data-placement="right"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on right
                    </button>

                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                            data-placement="bottom" data-content="Vivamus
          sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on bottom
                    </button>

                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
                            data-placement="left"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on left
                    </button>
                </div>
            </div>

            <!-- Badges  -->
            <div class="container-fluid example-container" data-category="badges">
                <h1>Badges</h1>

                <div class="mt-3 mb-5">
                    <h3>Badge heading</h3>
                    <h1>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h1>
                    <h2>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h2>
                    <h3>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h3>
                    <h4>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h4>
                    <h5>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h5>
                    <h6>Example heading
                        <span class="badge badge-secondary">New</span>
                    </h6>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Button with inline badge</h3>
                    <button type="button" class="btn btn-primary">
                        Notifications
                        <span class="badge badge-light">4</span>
                    </button>
                    <button type="button" class="btn btn-primary">
                        Profile
                        <span class="badge badge-light">9</span>
                        <span class="sr-only">unread messages</span>
                    </button>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Default badges</h3>
                    <span class="badge badge-primary">Primary</span>
                    <span class="badge badge-secondary">Secondary</span>
                    <span class="badge badge-success">Success</span>
                    <span class="badge badge-danger">Danger</span>
                    <span class="badge badge-warning">Warning</span>
                    <span class="badge badge-info">Info</span>
                    <span class="badge badge-light">Light</span>
                    <span class="badge badge-dark">Dark</span>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Badges pill</h3>
                    <span class="badge badge-pill badge-primary">Primary</span>
                    <span class="badge badge-pill badge-secondary">Secondary</span>
                    <span class="badge badge-pill badge-success">Success</span>
                    <span class="badge badge-pill badge-danger">Danger</span>
                    <span class="badge badge-pill badge-warning">Warning</span>
                    <span class="badge badge-pill badge-info">Info</span>
                    <span class="badge badge-pill badge-light">Light</span>
                    <span class="badge badge-pill badge-dark">Dark</span>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Badges with link</h3>
                    <a href="javascript:void(0);" class="badge badge-primary">Primary</a>
                    <a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>
                    <a href="javascript:void(0);" class="badge badge-success">Success</a>
                    <a href="javascript:void(0);" class="badge badge-danger">Danger</a>
                    <a href="javascript:void(0);" class="badge badge-warning">Warning</a>
                    <a href="javascript:void(0);" class="badge badge-info">Info</a>
                    <a href="javascript:void(0);" class="badge badge-light">Light</a>
                    <a href="javascript:void(0);" class="badge badge-dark">Dark</a>
                </div>
            </div>

            <!-- Modals  -->
            <div class="container-fluid example-container" data-category="modals">
                <h1>Modals</h1>

                <div class="mt-3 mb-5 row">
                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                            data-target="#flipFlop">
                        Default Modal
                    </button>

                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                            data-target="#largeShoes">
                        Large Modal
                    </button>

                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
                            data-target="#smallShoes">
                        Small Modal
                    </button>

                    <!-- The modal -->
                    <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog"
                         aria-labelledby="modalLabelSmall" aria-hidden="true">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">

                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
                                </div>

                                <div class="modal-body">
                                    Small shoes are typically worn by people with small feet.
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- The modal -->
                    <div class="modal fade" id="largeShoes" tabindex="-1" role="dialog"
                         aria-labelledby="modalLabelLarge" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">

                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
                                </div>

                                <div class="modal-body">
                                    Large shoes are usually avoided by people with small feet.
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- The modal -->
                    <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
                                </div>
                                <div class="modal-body">
                                    A type of open-toed sandal.
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alerts  -->
            <div class="container-fluid example-container" data-category="alerts">
                <h1>Alerts</h1>

                <div class="mt-3 mb-5">
                    <h3>Default alert</h3>
                    <div class="alert alert-success" role="alert">Success alert</div>
                    <div class="alert alert-info" role="alert">Info alert</div>
                    <div class="alert alert-warning" role="alert">Warning alert</div>
                    <div class="alert alert-danger" role="alert">Danger alert</div>
                    <div class="alert alert-light" role="alert">Light alert</div>
                    <div class="alert alert-dark" role="alert">Dark alert</div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Dismissible alert</h3>
                    <div class="alert alert-success alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Congratulations!</strong> You successfully tied your shoelace!
                    </div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Dismissible alert with fade</h3>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Congratulations!</strong> You successfully tied your shoelace!
                    </div>
                </div>
            </div>

            <!-- Progress bars  -->
            <div class="container-fluid example-container" data-category="progress-bars">
                <h1>Progress bars</h1>

                <div class="mt-3 mb-5">
                    <h3>Default Progress bar</h3>
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Striped Progress bar </h3>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
                             aria-valuenow="10" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
                             aria-valuenow="25" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
                             aria-valuenow="50" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"
                             aria-valuenow="75" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
                             aria-valuenow="100" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%"
                             aria-valuenow="40" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%"
                             aria-valuenow="80" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Animated Progress bar</h3>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                             aria-valuenow="75" aria-valuemin="0"
                             aria-valuemax="100" style="width: 75%"></div>
                    </div>
                </div>
            </div>

            <!-- List group  -->
            <div class="container-fluid example-container" data-category="list-group">
                <h1>List group</h1>

                <div class="mt-3 mb-5">
                    <h3>Default list group</h3>
                    <ul class="list-group">
                        <li class="list-group-item">These Boots Are Made For Walking</li>
                        <li class="list-group-item">Eleanor, Put Your Boots On</li>
                        <li class="list-group-item">Puss 'n' Boots</li>
                        <li class="list-group-item">Die With Your Boots On</li>
                        <li class="list-group-item">Fairies Wear Boots</li>
                    </ul>
                </div>

                <div class="mt-3 mb-5">
                    <h3>List group with pills</h3>
                    <ul class="list-group">
                        <li class="list-group-item justify-content-between">
                            These Boots Are Made For Walking
                            <span class="badge badge-secondary badge-pill">15</span>
                        </li>
                        <li class="list-group-item justify-content-between">
                            Eleanor, Put Your Boots On
                            <span class="badge badge-secondary badge-pill">38</span>
                        </li>
                        <li class="list-group-item justify-content-between">
                            Puss 'n' Boots
                            <span class="badge badge-secondary badge-pill">76</span>
                        </li>
                        <li class="list-group-item justify-content-between">
                            Die With Your Boots On
                            <span class="badge badge-secondary badge-pill">112</span>
                        </li>
                        <li class="list-group-item justify-content-between">
                            Fairies Wear Boots
                            <span class="badge badge-secondary badge-pill">181</span>
                        </li>
                    </ul>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Link List group</h3>
                    <div class="list-group">
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are
                            Made For Walking</a>
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put
                            Your Boots On</a>
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots
                            On</a>
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear
                            Boots</a>
                    </div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Button List group</h3>
                    <div class="list-group">
                        <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For
                            Walking
                        </button>
                        <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your
                            Boots On
                        </button>
                        <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
                        <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On
                        </button>
                        <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
                    </div>
                </div>

                <div class="mt-3 mb-5">
                    <h3>List group with colors</h3>
                    <div class="list-group">
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made
                            For Walking</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put
                            Your Boots On</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots
                            On</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
                        <a href="javascript:void(0);"
                           class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
                    </div>
                </div>
            </div>

            <!-- Image thumbnails  -->
            <div class="container-fluid example-container" data-category="image-thumbnails">
                <h1>Image thumbnails </h1>

                <div>
                    <img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">
                    <img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">
                    <img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">
                    <img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">
                </div>
            </div>

            <!-- Figures  -->
            <div class="container-fluid example-container" data-category="figures">
                <h1>Figures</h1>

                <div>
                    <figure class="figure">
                        <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
                             alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption">A caption for the above image.</figcaption>
                    </figure>
                </div>

                <div>
                    <figure class="figure">
                        <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
                             alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
                    </figure>
                </div>
            </div>

            <!-- Breadcrumbs  -->
            <div class="container-fluid example-container" data-category="breadcrumbs">
                <h1>Breadcrumbs</h1>

                <div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0);">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0);">Fruit</a>
                        </li>
                        <li class="breadcrumb-item active">Pears</li>
                    </ul>
                </div>
            </div>

            <!-- Carousel  -->
            <div class="container-fluid example-container" data-category="carousel">
                <h1>Carousel</h1>

                <div>
                    <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">
                                <div class="carousel-caption">
                                    <h3>First slide</h3>
                                    <p>This is the first slide.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720"
                                     alt="Second slide">
                                <div class="carousel-caption">
                                    <h3>Second slide</h3>
                                    <p>This is the second slide.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">
                                <div class="carousel-caption">
                                    <h3>Third slide</h3>
                                    <p>This is the third slide.</p>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Close  -->
            <div class="container-fluid example-container" data-category="close">
                <h1>Close</h1>
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Code -->
            <div class="container-fluid example-container" data-category="code">
                <h1>Code</h1>
                <div class="mt-3 mb-5">
                    <h3>Default code</h3>
                    For example,
                    <code>&lt;section&gt;</code> should be wrapped as inline.
                </div>

                <div class="mt-3 mb-5">
                    <h3>Code with pre tag</h3>
                    <pre>
        <code>
          &lt;p&gt;Sample text here...&lt;/p&gt;
          &lt;p&gt;And another line of sample text here...&lt;/p&gt;
        </code>
      </pre>
                </div>


                <div class="mt-3 mb-5">
                    <h3>Var tag</h3>
                    <var>y</var> =
                    <var>m</var>
                    <var>x</var> +
                    <var>b</var>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Kbd tag</h3>
                    To switch directories, type
                    <kbd>cd</kbd> followed by the name of the directory.
                    <br> To edit settings, press
                    <kbd>
                        <kbd>ctrl</kbd> +
                        <kbd>,</kbd>
                    </kbd>
                </div>

                <div class="mt-3 mb-5">
                    <h3>Samp tag</h3>
                    <samp>This text is meant to be treated as sample output from a computer program.</samp>
                </div>

                <div class="pt-5 pb-5 mb-5 mt-3"></div>
                <div class="pt-5 pb-5 mb-5 mt-3"></div>
                <div class="pt-5 pb-5 mb-5 mt-3"></div>
                <div class="pt-5 pb-5 mb-5 mt-3"></div>
                <div class="pt-5 pb-5 mb-5 mt-3"></div>
            </div>
            <div class="ht-tm-cat">
                <a id="alerts" class="ht-anchor">Alerts</a>
                <h5 class="ht-tm-cat-title">Alerts</h5>


                <div class="ht-tm-codeblock ht-tm-needs-darkness">
                    <div class="ht-tm-element alert alert-primary" role="alert">
                        <strong>Well done!</strong> You successfully read this
                        important alert message.
                    </div>

                    <div class="ht-tm-element alert alert-primary alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <strong>Well done!</strong> You can dismiss this message with the X button.
                    </div>

                    <div class="ht-tm-element alert alert-primary" role="alert">
                        <h4 class="alert-heading">Well done!</h4>
                        You successfully read this important alert message.
                        <a href="#!" class="alert-link">It contains a link and heading.</a>
                    </div>
                </div>


            </div> <!--alerts -->

            <div class="ht-tm-cat">
                <a id="badges" class="ht-anchor">Badges</a>
                <h5 class="ht-tm-cat-title">Badges</h5>

                <div class="ht-tm-codeblock ht-tm-needs-darkness">
                    <span class="ht-tm-element badge badge-primary">Regular Badge</span>
                    <span class="ht-tm-element badge badge-pill badge-primary">Pill Badge</span>
                    <a href="#!" class="ht-tm-element badge badge-primary">Link Badge</a>
                </div>
            </div> <!-- Badges -->

            <div class="ht-tm-cat">
                <a id="buttons" class="ht-anchor"></a>
                <h5 class="ht-tm-cat-title">Buttons</h5>

                <div class="ht-tm-needs-darkness">

                    <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                        <div class="row">
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-primary">Default Button</a>
                                <a href="#!" class="ht-tm-element btn btn-primary"><span
                                    class="fas fa-download mr-2"></span>With Icon</a>
                                <a href="#!" class="ht-tm-element btn btn-primary"><span
                                    class="fas fa-download"></span></a>
                            </div>
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">Outline Button</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fas fa-download mr-2"></span>
                                    With Icon</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fas fa-download"></span></a>
                            </div>
                        </div>
                    </div>

                    <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                        <div class="row">
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-twitter mr-2"></span>
                                    Tweet</a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-twitter"></span></a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-facebook mr-2"></span>
                                    Share</a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-facebook"></span></a>
                            </div>
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-twitter mr-2"></span>
                                    Tweet</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-twitter"></span></a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-facebook mr-2"></span>
                                    Share</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-facebook"></span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-instagram mr-2"></span>
                                    Instagram</a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-instagram"></span></a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-github mr-2"></span>
                                    Git</a>
                                <a href="#!" class="ht-tm-element btn btn-primary">
                                    <span class="fab fa-github"></span></a>
                            </div>
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-instagram mr-2"></span>
                                    Instagram</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-instagram"></span></a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-github mr-2"></span>
                                    Git</a>
                                <a href="#!" class="ht-tm-element btn btn-outline-primary">
                                    <span class="fab fa-github"></span></a>
                            </div>
                        </div>
                    </div>

                    <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                        <div class="row">
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-primary btn-block">Block level button</a>
                            </div>
                            <div class="col-md-6">
                                <a href="#!" class="ht-tm-element btn btn-outline-primary btn-block">Block level
                                    button</a>
                            </div>
                        </div>
                    </div>

                    <h6 class="ht-tm-cat-subtitle">Dropdowns</h6>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                                <div class="ht-tm-element btn-group">
                                    <button type="button" class="btn btn-primary 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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#!">Separated link</a>
                                    </div>
                                </div>
                                <div class="ht-tm-element btn-group">
                                    <button type="button" class="btn btn-primary">Action</button>
                                    <button type="button"
                                            class="btn btn-primary 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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#!">Separated link</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                                <div class="ht-tm-element btn-group">
                                    <button type="button" class="btn btn-outline-primary 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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#!">Separated link</a>
                                    </div>
                                </div>
                                <div class="ht-tm-element btn-group">
                                    <button type="button" class="btn btn-outline-primary">Action</button>
                                    <button type="button"
                                            class="btn btn-outline-primary 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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#!">Separated link</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <h6 class="ht-tm-cat-subtitle">Grouping them</h6>
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group">
                                    <a href="#!" class="btn btn-primary">One</a>
                                    <a href="#!" class="btn btn-primary">Two</a>
                                    <a href="#!" class="btn btn-primary">Three</a>
                                </div>
                            </div>
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group" role="group"
                                     aria-label="Button group with nested dropdown">
                                    <a href="#!" class="btn btn-primary">One</a>
                                    <a href="#!" class="btn btn-primary">Two</a>

                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDrop5" type="button"
                                                class="btn btn-primary dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Dropdown
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop5">
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group-vertical" role="group"
                                     aria-label="Basic example">
                                    <a href="#!" class="btn btn-primary">Seven</a>
                                    <a href="#!" class="btn btn-primary">Eleven</a>
                                </div>

                                <div class="ht-tm-element btn-group-vertical" role="group"
                                     aria-label="Button group with nested dropdown">
                                    <a href="#!" class="btn btn-primary">Seven</a>

                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDrop3" type="button"
                                                class="btn btn-primary dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Dropdown
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group">
                                    <a href="#!" class="btn btn-outline-primary">One</a>
                                    <a href="#!" class="btn btn-outline-primary">Two</a>
                                    <a href="#!" class="btn btn-outline-primary">Three</a>
                                </div>
                            </div>
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group" role="group"
                                     aria-label="Button group with nested dropdown">
                                    <a href="#!" class="btn btn-outline-primary">One</a>
                                    <a href="#!" class="btn btn-outline-primary">Two</a>

                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDrop1" type="button"
                                                class="btn btn-outline-primary dropdown-toggle"
                                                data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                            Dropdown
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="ht-tm-codeblock">
                                <div class="ht-tm-element btn-group-vertical" role="group"
                                     aria-label="Basic example">
                                    <a href="#!" class="btn btn-outline-primary">Seven</a>
                                    <a href="#!" class="btn btn-outline-primary">Eleven</a>
                                </div>

                                <div class="ht-tm-element btn-group-vertical" role="group"
                                     aria-label="Button group with nested dropdown">
                                    <a href="#!" class="btn btn-outline-primary">Seven</a>

                                    <div class="btn-group" role="group">
                                        <button id="btnGroupDrop2" type="button"
                                                class="btn btn-outline-primary dropdown-toggle"
                                                data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                            Dropdown
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                            <a class="dropdown-item" href="#!">Dropdown link</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h6 class="ht-tm-cat-subtitle">Checkboxes and Radios</h6>
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                                <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-primary active">
                                        <input type="checkbox" checked="" autocomplete="off"> Checkbox 1
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="checkbox" autocomplete="off"> Checkbox 2
                                    </label>
                                </div>
                                <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-primary active">
                                        <input type="radio" name="options" id="option-1" autocomplete="off"
                                               checked="">
                                        Radio 1
                                    </label>
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="option-2" autocomplete="off"> Radio 2
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                                <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-outline-primary active">
                                        <input type="checkbox" checked="" autocomplete="off"> Checkbox 1
                                    </label>
                                    <label class="btn btn-outline-primary">
                                        <input type="checkbox" autocomplete="off"> Checkbox 2
                                    </label>
                                </div>
                                <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-outline-primary active">
                                        <input type="radio" name="options" id="radio-option-1" autocomplete="off"
                                               checked=""> Radio 1
                                    </label>
                                    <label class="btn btn-outline-primary">
                                        <input type="radio" name="options" id="radio-option-2" autocomplete="off">
                                        Radio
                                        2
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


            </div> <!-- buttons -->

            <div class="ht-tm-cat ht-tm-btn-replaceable">
                <a id="cards" class="ht-anchor">Cards</a>

                <h5 class="ht-tm-cat-title">Cards</h5>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element card bg-primary text-white mb-3 text-center">
                                <div class="card-body">
                                    <blockquote class="card-blockquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                            erat
                                            a ante. Integer posuere erat a ante.</p>
                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element card">
                                <img class="card-img-top" src=""
                                     alt="Card image cap">
                                <div class="card-body">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the card's content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="card ht-tm-element">
                                <div class="card-header">
                                    Quote
                                </div>
                                <div class="card-body">
                                    <blockquote class="card-blockquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                            erat
                                            a ante.</p>
                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element card border-primary mb-3 text-center">
                                <div class="card-body">
                                    <blockquote class="card-blockquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                            erat
                                            a ante.</p>
                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock ht-tm-btn">
                            <div class="ht-tm-element card text-center">
                                <div class="card-header">
                                    Featured
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">Special title treatment</h4>
                                    <p class="card-text">With supporting text below as a natural lead-in to
                                        additional
                                        content.</p>
                                    <a href="#!" class="btn btn-primary">Go somewhere</a>
                                </div>
                                <div class="card-footer text-muted">
                                    2 days ago
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="card ht-tm-element">
                                <img class="card-img-top" src=""
                                     alt="Card image cap">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item list-group-item-action">Cras justo odio</li>
                                    <li class="list-group-item list-group-item-action">Dapibus ac facilisis in</li>
                                    <li class="list-group-item list-group-item-action">Vestibulum at eros</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ht-tm-codeblock">

                    <div class="card text-center ht-tm-element">
                        <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">Special title treatment</h4>
                            <p class="card-text">With supporting text below as a natural lead-in to additional
                                content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>

                </div>

            </div> <!-- cards -->

            <div class="ht-tm-cat">
                <a id="carousel" class="ht-anchor">Carousel</a>
                <h5 class="ht-tm-cat-title">Carousel</h5>
                <div id="carouselExampleControls" class="ht-tm-element carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <img class="d-block img-fluid" src=""
                                 alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src=""
                                 alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src=""
                                 alt="Third slide">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                       data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                       data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div> <!-- carousel -->

            <div class="ht-tm-cat">
                <a id="forms" class="ht-anchor">Forms</a>
                <h5 class="ht-tm-cat-title">Forms</h5>

                <div class="row">
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">Start with a small group form</h6>

                                <div
                                    class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-element ht-tm-element-inner">
                                    <form>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1"
                                                   aria-describedby="emailHelp" placeholder="Enter email">
                                            <small id="emailHelp" class="form-text text-muted">We'll never share
                                                your
                                                email</small>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </form>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body ht-tm-superspecialcardcheat">

                                <h6 class="card-title">Or with an inline form</h6>

                                <div class="ht-tm-codeblock ht-tm-btn-replaceable">
                                    <form class="form-inline ht-tm-element">
                                        <label class="sr-only" for="inlineFormInputGroup">Username</label>
                                        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                            <input type="text" class="form-control" id="inlineFormInputGroup"
                                                   placeholder="Username">
                                        </div>

                                        <button type="submit" class="btn btn-primary">Go</button>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="ht-tm-codeblock">

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <form autocomplete="off">

                                        <h6 class="card-title">Add some extras too..</h6>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="text" value="Text input"
                                                   id="example-text-input">
                                        </div>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="email" value="email@example.com"
                                                   id="example-email-input">
                                        </div>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="url" value="https://getbootstrap.com"
                                                   id="example-url-input">
                                        </div>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="date" value="2011-08-19"
                                                   id="example-date-input">
                                        </div>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="password" value="hunter2"
                                                   id="example-password-input">
                                        </div>

                                        <div class="ht-tm-element ht-tm-element-inner">
                                            <input class="form-control" type="number" value="42"
                                                   id="example-number-input">
                                        </div>

                                    </form>
                                </div>
                            </div>

                        </div>
                        <div class="col-xl-6">

                            <div class="card">
                                <div class="card-body">

                                    <h6 class="card-title">Even more form controls</h6>
                                    <div class="ht-tm-codeblock">
                                        <div class="ht-tm-element custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                                            <label class="custom-control-label" for="customCheck1">Check this custom
                                                checkbox</label>
                                        </div>

                                    </div>

                                    <div class="ht-tm-codeblock">
                                        <div class="ht-tm-element custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="customRadio"
                                                   class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio1">Toggle this
                                                custom
                                                radio</label>
                                        </div>
                                        <div class="ht-tm-element custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="customRadio"
                                                   class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio2">Or toggle this
                                                other
                                                custom radio</label>
                                        </div>
                                    </div>

                                    <div class="ht-tm-codeblock">
                                        <div class="ht-tm-element ht-tm-element-inner d-inline-block">
                                            <select class="custom-select">
                                                <option selected="">Open this select menu</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="ht-tm-codeblock">
                                        <div class="ht-tm-element custom-file">
                                            <input type="file" class="custom-file-input" id="customFile">
                                            <label class="custom-file-label" for="customFile">Choose file</label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row ht-tm-btn-replaceable ht-tm-needs-darkness">
                    <div class="col-xl-6">

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group mb-3">
                                <input type="text" class="form-control" placeholder="Recipient's username"
                                       aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">Go!</button>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-primary" type="button">Go!</button>
                                </div>
                                <input type="text" class="form-control" placeholder="" aria-label=""
                                       aria-describedby="basic-addon1">
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-primary" type="button">Love it</button>
                                </div>
                                <input type="text" class="form-control" placeholder="" aria-label=""
                                       aria-describedby="basic-addon1">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button">Hate it</button>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-primary dropdown-toggle" type="button"
                                            data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">Dropdown
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control"
                                       aria-label="Text input with dropdown button">
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group mb-3">
                                <input type="text" class="form-control" placeholder="Recipient's username"
                                       aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-primary" type="button">Go!</button>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-primary" type="button">Go!</button>
                                </div>
                                <input type="text" class="form-control" placeholder="" aria-label=""
                                       aria-describedby="basic-addon1">
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-primary" type="button">Love it</button>
                                </div>
                                <input type="text" class="form-control" placeholder="" aria-label=""
                                       aria-describedby="basic-addon1">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-primary" type="button">Hate it</button>
                                </div>
                            </div>
                        </div>

                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element input-group">
                                <div class="input-group-prepend">
                                    <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control"
                                       aria-label="Text input with dropdown button">
                            </div>
                        </div>
                    </div>

                </div>

            </div> <!-- forms -->

            <div class="ht-tm-cat ht-tm-btn-replaceable">
                <a id="jumbotron" class="ht-anchor">Jumbotron</a>
                <h5 class="ht-tm-cat-title">Jumbotron</h5>

                <div class="ht-tm-codeblock">
                    <div class="ht-tm-element jumbotron">
                        <h1 class="display-3">Hello, world!</h1>
                        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
                            extra
                            attention to featured content or information.</p>
                        <hr class="my-4">
                        <p>It uses utility classes for typography and spacing to space content out within the larger
                            container.</p>
                        <p class="lead">
                            <a class="btn btn-primary" href="#!" role="button">Learn more</a>
                        </p>
                    </div>

                </div>
            </div> <!-- jumbotron -->

            <div class="ht-tm-cat">
                <a id="lists" class="ht-anchor">Lists</a>
                <h5 class="ht-tm-cat-title">
                    Lists
                </h5>

                <div class="row">
                    <div class="col-xl-6">
                        <div class="ht-tm-codeblock">
                            <ul class="list-group ht-tm-element">
                                <li class="list-group-item">Cras justo odio</li>
                                <li class="list-group-item">Dapibus ac facilisis in</li>
                                <li class="list-group-item">Porta ac consectetur ac</li>
                                <li class="list-group-item justify-content-between">
                                    Cras justo odio
                                    <span class="badge badge-default badge-pill">14</span>
                                </li>
                                <li class="list-group-item">Vestibulum at eros</li>
                                <li class="list-group-item list-group-item-primary">Dapibus ac facilisis in</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="ht-tm-codeblock">
                            <div class="list-group ht-tm-element">
                                <a href="#!" class="list-group-item active">
                                    Cras justo odio
                                </a>
                                <a href="#!" class="list-group-item list-group-item-action">Dapibus ac facilisis
                                    in</a>
                                <a href="#!" class="list-group-item list-group-item-action">Morbi leo risus</a>
                                <a href="#!" class="list-group-item list-group-item-action justify-content-between">
                                    Cras justo odio
                                    <span class="badge badge-default badge-pill">14</span>
                                </a>
                                <a href="#!" class="list-group-item list-group-item-action">Porta ac consectetur
                                    ac</a>
                                <a href="#!" class="list-group-item list-group-item-action list-group-item-primary">Vestibulum
                                    at eros</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div> <!-- lists -->

            <div class="ht-tm-cat">
                <a id="navigation" class="ht-anchor">Navigation</a>
                <h5 class="ht-tm-cat-title">Navigation</h5>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="ht-tm-codeblock">
                            <ul class="nav nav-tabs ht-tm-element">
                                <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" href="#!">Link</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#!">Disabled</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="ht-tm-codeblock">
                            <ul class="nav nav-pills ht-tm-element">
                                <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" href="#!">Link</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#!">Disabled</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="ht-tm-codeblock">
                    <nav class="navbar navbar-expand-lg navbar-dark bg-primary ht-tm-element">
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                                data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <a class="navbar-brand" href="#!">Navbar</a>

                        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                            <ul class="navbar-nav mr-auto mt-2 mt-md-0">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#!">Home <span class="sr-only">(current)</span></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>
                            <form class="form-inline my-2 my-lg-0">
                                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                            </form>
                        </div>
                    </nav>
                </div>
            </div> <!-- navigation -->

            <div class="ht-tm-cat">
                <a id="pagination" class="ht-anchor">Pagination</a>
                <h5 class="ht-tm-cat-title">Pagination</h5>

                <div class="row">
                    <div class="col-xl-6">
                        <div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item"><a class="page-link" href="#!">Previous</a></li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item"><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>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
                            <nav aria-label="...">
                                <ul class="pagination">
                                    <li class="page-item disabled">
                                        <span class="page-link">Previous</span>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#!">1</a></li>
                                    <li class="page-item active">
              <span class="page-link">
                2
                <span class="sr-only">(current)</span>
              </span>
                                    </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>
                        </div>
                    </div>
                </div>
            </div> <!-- pagination -->

            <div class="ht-tm-btn-replaceable">
                <a id="popovers" class="ht-anchor">Popovers</a>
                <h5 class="ht-tm-cat-title">Popovers</h5>

                <div class="ht-tm-codeblock ht-tm-needs-darkness">
                    <button type="button" class="btn btn-primary ht-tm-element" data-container="body"
                            data-toggle="popover" data-placement="top"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on top
                    </button>

                    <button type="button" class="btn btn-primary ht-tm-element" data-container="body"
                            data-toggle="popover" data-placement="right"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on right
                    </button>

                    <button type="button" class="btn btn-primary ht-tm-element" data-container="body"
                            data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on bottom
                    </button>

                    <button type="button" class="btn btn-primary ht-tm-element" data-container="body"
                            data-toggle="popover" data-placement="left"
                            data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on left
                    </button>
                </div>

            </div> <!-- popovers -->

            <div class="ht-tm-cat">
                <a id="progress" class="ht-anchor">Progress</a>
                <h5 class="ht-tm-cat-title">Progress</h5>

                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"
                             aria-valuenow="25"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%"
                             aria-valuenow="50"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"
                             aria-valuenow="75"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 100%"
                             aria-valuenow="100"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>


                <div class="ht-tm-codeblock mt-5">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                             style="width: 25%"
                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                             style="width: 50%"
                             aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                             style="width: 75%"
                             aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="ht-tm-codeblock">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                             style="width: 100%"
                             aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

                <div class="ht-tm-codeblock mt-5">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                             role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                             style="width: 75%"></div>
                    </div>
                </div>

                <div class="my-5">
                    <div class="progress ht-tm-element">
                        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
                             aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
                             aria-valuenow="30"
                             aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20"
                             aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

            </div> <!-- progress -->

            <div class="ht-tm-cat">
                <a id="tables" class="ht-anchor">Tables</a>
                <h5 class="ht-tm-cat-title">Tables</h5>

                <div class="ht-tm-codeblock">
                    <table class="table table-hover table-striped ht-tm-element">
                        <thead class="thead-dark">
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>

                        <tr class="table-primary">
                            <th scope="row">3</th>
                            <td>Contextual</td>
                            <td>Row</td>
                            <td>@hackerthemes</td>
                        </tr>

                        </tbody>
                    </table>
                </div>

                <div class="ht-tm-codeblock mt-4">
                    <table class="table table-hover table-primary ht-tm-element">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr class="bg-primary">
                            <th scope="row">3</th>
                            <td colspan="2">Contextual Row</td>
                            <td>@hackerthemes</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div> <!-- tables -->

            <div class="ht-tm-cat">
                <a id="tooltips" class="ht-anchor">Tooltips</a>
                <h5 class="ht-tm-cat-title">Tooltips</h5>

                <div class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-needs-darkness">
                    <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
                            data-placement="top" title="Tooltip on top">
                        Tooltip on top
                    </button>
                    <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
                            data-placement="right" title="Tooltip on right">
                        Tooltip on right
                    </button>
                    <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
                            data-placement="bottom" title="Tooltip on bottom">
                        Tooltip on bottom
                    </button>
                    <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
                            data-placement="left" title="Tooltip on left">
                        Tooltip on left
                    </button>
                </div>
            </div> <!-- tooltips -->

            <div class="ht-tm-cat">
                <a id="typography" class="ht-anchor">Typography</a>
                <h5 class="ht-tm-cat-title">Typography</h5>

                <div class="row">
                    <div class="col-xl-12">
                        <div class="ht-tm-codeblock">
                            <h1 class="display-1 ht-tm-element">Display 1</h1>
                            <h1 class="display-2 ht-tm-element">Display 2</h1>
                            <h1 class="display-3 ht-tm-element">Display 3</h1>
                            <h1 class="display-4 ht-tm-element">Display 4</h1>
                        </div>
                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h1>h1. Bootstrap heading</h1>
                            </div>
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h2>h2. Bootstrap heading</h2>
                            </div>
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h3>h3. Bootstrap heading</h3>
                            </div>
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h4>h4. Bootstrap heading</h4>
                            </div>
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h5>h5. Bootstrap heading</h5>
                            </div>
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h6>h6. Bootstrap heading</h6>
                            </div>
                        </div>
                        <div class="ht-tm-codeblock">
                            <p class="lead ht-tm-element">
                                Lead Text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                                Duis
                                mollis, est non commodo luctus.
                            </p>
                        </div>
                        <div class="ht-tm-codeblock">
                            <div class="ht-tm-element ht-tm-element-inner">
                                <h6>Body text </h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, cumque delectus
                                    deleniti dolor esse ex fugiat, id in ipsum modi molestiae mollitia, nulla
                                    numquam
                                    provident quasi soluta sunt tempora vel. Lorem ipsum dolor sit amet, consectetur
                                    adipisicing elit. Accusamus, aspernatur consequuntur cumque dolor ducimus earum
                                    eos,
                                    expedita, fuga harum incidunt maxime modi mollitia numquam praesentium sapiente
                                    suscipit temporibus ut vero. Lorem ipsum dolor sit amet, consectetur adipisicing
                                    elit. Amet nam nostrum pariatur praesentium tempore. Ad architecto at aut dicta
                                    enim, eveniet expedita libero magnam minus, nihil, non sequi sunt
                                    voluptates!</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="ht-tm-codeblock">
                            <blockquote class="blockquote ht-tm-element">
                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                                    posuere
                                    erat a ante.</p>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <blockquote class="blockquote blockquote-reverse ht-tm-element">
                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                erat a ante.</p>
                            <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
                                Title</cite></footer>
                        </blockquote>
                    </div>

                    <!--<div class="col-xl-12">-->
                    <!--<div class="ht-tm-codeblock">-->
                    <!--<p class="text-primary ht-tm-element">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
                    <!--<div class="bg-primary ht-tm-element">Background color. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
            </div> <!-- typography -->

            <!--<div class="ht-tm-cat">-->
            <!--<h5 class="ht-tm-cat-title">Cat</h5>-->

            <!--</div> &lt;!&ndash; something &ndash;&gt;-->


            <!--<div class="ht-tm-cat">-->
            <!--<a id="lists" class="ht-anchor">Lists</a>-->
            <!--<h5 class="ht-tm-cat-title">-->
            <!--Lists-->
            <!--</h5>-->

            <!--<div class="row">-->
            <!--<div class="col-xl-6">-->
            <!--<div class="ht-tm-codeblock">-->

            <!--</div>-->
            <!--</div>-->
            <!--<div class="col-xl-6">-->
            <!--<div class="ht-tm-codeblock">-->

            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div> &lt;!&ndash; cat title &ndash;&gt;-->


            <!--<div class="ht-tm-cat">-->
            <!--<h5 class="ht-tm-cat-title">Cat</h5>-->

            <!--</div> &lt;!&ndash; something &ndash;&gt;-->


            <div class="container-fluid p-0">
                <div class="page-header">
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 id="buttons">Buttons</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-8">

                        <p class="bs-component">
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-secondary">Secondary</button>
                            <button type="button" class="btn btn-success">Success</button>
                            <button type="button" class="btn btn-info">Info</button>
                            <button type="button" class="btn btn-warning">Warning</button>
                            <button type="button" class="btn btn-danger">Danger</button>
                            <button type="button" class="btn btn-link">Link</button>
                        </p>

                        <p class="bs-component">
                            <button type="button" class="btn btn-primary disabled">Primary</button>
                            <button type="button" class="btn btn-secondary disabled">Secondary</button>
                            <button type="button" class="btn btn-success disabled">Success</button>
                            <button type="button" class="btn btn-info disabled">Info</button>
                            <button type="button" class="btn btn-warning disabled">Warning</button>
                            <button type="button" class="btn btn-danger disabled">Danger</button>
                            <button type="button" class="btn btn-link disabled">Link</button>
                        </p>

                        <p class="bs-component">
                            <button type="button" class="btn btn-outline-primary">Primary</button>
                            <button type="button" class="btn btn-outline-secondary">Secondary</button>
                            <button type="button" class="btn btn-outline-success">Success</button>
                            <button type="button" class="btn btn-outline-info">Info</button>
                            <button type="button" class="btn btn-outline-warning">Warning</button>
                            <button type="button" class="btn btn-outline-danger">Danger</button>
                        </p>

                        <div class="bs-component">
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-primary">Primary</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle"
                                            data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false"></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>

                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-success">Success</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle"
                                            data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false"></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>

                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-info">Info</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle"
                                            data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false"></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>

                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle"
                                            data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false"></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bs-component">
                            <button type="button" class="btn btn-primary btn-lg">Large button</button>
                            <button type="button" class="btn btn-primary">Default button</button>
                            <button type="button" class="btn btn-primary btn-sm">Small button</button>
                        </div>

                    </div>
                    <div class="col-sm-4">

                        <div class="bs-component" style="margin-bottom: 15px;">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-primary active">
                                    <input type="checkbox" checked autocomplete="off"> Active
                                </label>
                                <label class="btn btn-primary">
                                    <input type="checkbox" autocomplete="off"> Check
                                </label>
                                <label class="btn btn-primary">
                                    <input type="checkbox" autocomplete="off"> Check
                                </label>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px;">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-primary active">
                                    <input type="radio" name="options" id="option1" autocomplete="off" checked>
                                    Active
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
                                </label>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px;">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary">Left</button>
                                <button type="button" class="btn btn-secondary">Middle</button>
                                <button type="button" class="btn btn-secondary">Right</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px;">
                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-secondary">1</button>
                                    <button type="button" class="btn btn-secondary">2</button>
                                    <button type="button" class="btn btn-secondary">3</button>
                                    <button type="button" class="btn btn-secondary">4</button>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                    <button type="button" class="btn btn-secondary">5</button>
                                    <button type="button" class="btn btn-secondary">6</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Navbar
                  ================================================== -->
            <div class="bs-docs-section clearfix">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="navbars">Navbars</h2>
                        </div>

                        <div class="bs-component">
                            <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse"
                                        data-target="#navbarColor01"
                                        aria-controls="navbarColor01" aria-expanded="false"
                                        aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarColor01">
                                    <ul class="navbar-nav mr-auto">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Features</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Pricing</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">About</a>
                                        </li>
                                    </ul>
                                    <form class="form-inline my-2 my-lg-0">
                                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                                    </form>
                                </div>
                            </nav>
                        </div>

                        <div class="bs-component">
                            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse"
                                        data-target="#navbarColor02"
                                        aria-controls="navbarColor02" aria-expanded="false"
                                        aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarColor02">
                                    <ul class="navbar-nav mr-auto">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Features</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Pricing</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">About</a>
                                        </li>
                                    </ul>
                                    <form class="form-inline my-2 my-lg-0">
                                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                                    </form>
                                </div>
                            </nav>
                        </div>

                        <div class="bs-component">
                            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse"
                                        data-target="#navbarColor03"
                                        aria-controls="navbarColor03" aria-expanded="false"
                                        aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>

                                <div class="collapse navbar-collapse" id="navbarColor03">
                                    <ul class="navbar-nav mr-auto">
                                        <li class="nav-item active">
                                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Features</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Pricing</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">About</a>
                                        </li>
                                    </ul>
                                    <form class="form-inline my-2 my-lg-0">
                                        <input class="form-control mr-sm-2" type="text" placeholder="Search">
                                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
                                    </form>
                                </div>
                            </nav>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Typography
                  ================================================== -->
            <div class="bs-docs-section">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="typography">Typography</h2>
                        </div>
                    </div>
                </div>

                <!-- Headings -->

                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <h1>Heading 1</h1>
                            <h2>Heading 2</h2>
                            <h3>Heading 3</h3>
                            <h4>Heading 4</h4>
                            <h5>Heading 5</h5>
                            <h6>Heading 6</h6>
                            <h3>
                                Heading
                                <small class="text-muted">with muted text</small>
                            </h3>
                            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                                auctor.</p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <h2>Example body text</h2>
                            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis
                                natoque
                                penatibus et
                                magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
                                ultricies
                                vehicula.</p>
                            <p><small>This line of text is meant to be treated as fine print.</small></p>
                            <p>The following is <strong>rendered as bold text</strong>.</p>
                            <p>The following is <em>rendered as italicized text</em>.</p>
                            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
                        </div>

                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <h2>Emphasis classes</h2>
                            <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                            <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p class="text-secondary">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
                            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                            <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor
                                ligula.</p>
                            <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                        </div>

                    </div>
                </div>

                <!-- Blockquotes -->

                <div class="row">
                    <div class="col-sm-12">
                        <h2 id="type-blockquotes">Blockquotes</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <blockquote class="blockquote">
                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                                    posuere
                                    erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
                                    Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <blockquote class="blockquote text-center">
                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                                    posuere
                                    erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
                                    Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <blockquote class="blockquote text-right">
                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
                                    posuere
                                    erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
                                    Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tables
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="tables">Tables</h2>
                        </div>

                        <div class="bs-component">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col">Type</th>
                                    <th scope="col">Column heading</th>
                                    <th scope="col">Column heading</th>
                                    <th scope="col">Column heading</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="table-active">
                                    <th scope="row">Active</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr>
                                    <th scope="row">Default</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-primary">
                                    <th scope="row">Primary</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-secondary">
                                    <th scope="row">Secondary</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-success">
                                    <th scope="row">Success</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-danger">
                                    <th scope="row">Danger</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-warning">
                                    <th scope="row">Warning</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-info">
                                    <th scope="row">Info</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-light">
                                    <th scope="row">Light</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                <tr class="table-dark">
                                    <th scope="row">Dark</th>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                    <td>Column content</td>
                                </tr>
                                </tbody>
                            </table>
                        </div><!-- /example -->
                    </div>
                </div>
            </div>

            <!-- Forms
                  ================================================== -->
            <div class="bs-docs-section">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="forms">Forms</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="bs-component">
                            <form>
                                <fieldset>
                                    <legend>Legend</legend>
                                    <div class="form-group row">
                                        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
                                        <div class="col-sm-10">
                                            <input type="text" readonly class="form-control-plaintext"
                                                   id="staticEmail"
                                                   value="email@example.com">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1"
                                               aria-describedby="emailHelp"
                                               placeholder="Enter email">
                                        <small id="emailHelp" class="form-text text-muted">We'll never share your
                                            email
                                            with anyone else.</small>
                                    </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="exampleSelect1">Example select</label>
                                        <select class="form-control" id="exampleSelect1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleSelect2">Example multiple select</label>
                                        <select multiple class="form-control" id="exampleSelect2">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleTextarea">Example textarea</label>
                                        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputFile">File input</label>
                                        <input type="file" class="form-control-file" id="exampleInputFile"
                                               aria-describedby="fileHelp">
                                        <small id="fileHelp" class="form-text text-muted">This is some placeholder
                                            block-level help text for
                                            the above input. It's a bit lighter and easily wraps to a new
                                            line.</small>
                                    </div>
                                    <fieldset class="form-group">
                                        <legend>Radio buttons</legend>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optionsRadios"
                                                       id="optionsRadios1" value="option1"
                                                       checked>
                                                Option one is this and that&mdash;be sure to include why it's great
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optionsRadios"
                                                       id="optionsRadios2" value="option2">
                                                Option two can be something else and selecting it will deselect
                                                option
                                                one
                                            </label>
                                        </div>
                                        <div class="form-check disabled">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="optionsRadios"
                                                       id="optionsRadios3" value="option3"
                                                       disabled>
                                                Option three is disabled
                                            </label>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend>Checkboxes</legend>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" value="" checked>
                                                Option one is this and that&mdash;be sure to include why it's great
                                            </label>
                                        </div>
                                        <div class="form-check disabled">
                                            <label class="form-check-label">
                                                <input class="form-check-input" type="checkbox" value="" disabled>
                                                Option two is disabled
                                            </label>
                                        </div>
                                    </fieldset>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <div class="col-sm-4 offset-lg-1">

                        <form class="bs-component">
                            <div class="form-group">
                                <fieldset disabled>
                                    <label class="control-label" for="disabledInput">Disabled input</label>
                                    <input class="form-control" id="disabledInput" type="text"
                                           placeholder="Disabled input here..." disabled="">
                                </fieldset>
                            </div>

                            <div class="form-group">
                                <fieldset>
                                    <label class="control-label" for="readOnlyInput">Readonly input</label>
                                    <input class="form-control" id="readOnlyInput" type="text"
                                           placeholder="Readonly input here…" readonly>
                                </fieldset>
                            </div>

                            <div class="form-group has-success">
                                <label class="form-control-label" for="inputSuccess1">Valid input</label>
                                <input type="text" value="correct value" class="form-control is-valid"
                                       id="inputValid">
                                <div class="valid-feedback">Success! You've done it.</div>
                            </div>

                            <div class="form-group has-danger">
                                <label class="form-control-label" for="inputDanger1">Invalid input</label>
                                <input type="text" value="wrong value" class="form-control is-invalid"
                                       id="inputInvalid">
                                <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
                            </div>

                            <div class="form-group">
                                <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
                                <input class="form-control form-control-lg" type="text"
                                       placeholder=".form-control-lg"
                                       id="inputLarge">
                            </div>

                            <div class="form-group">
                                <label class="col-form-label" for="inputDefault">Default input</label>
                                <input type="text" class="form-control" placeholder="Default input"
                                       id="inputDefault">
                            </div>

                            <div class="form-group">
                                <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
                                <input class="form-control form-control-sm" type="text"
                                       placeholder=".form-control-sm"
                                       id="inputSmall">
                            </div>

                            <div class="form-group">
                                <label class="control-label">Input addons</label>
                                <div class="form-group">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">$</span>
                                        </div>
                                        <input type="text" class="form-control"
                                               aria-label="Amount (to the nearest dollar)">
                                        <div class="input-group-append">
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="bs-component">
                            <fieldset>
                                <legend>Custom forms</legend>
                                <div class="form-group">
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio1" name="customRadio"
                                               class="custom-control-input" checked>
                                        <label class="custom-control-label" for="customRadio1">Toggle this custom
                                            radio</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio2" name="customRadio"
                                               class="custom-control-input">
                                        <label class="custom-control-label" for="customRadio2">Or toggle this other
                                            custom radio</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="customRadio3" name="customRadio"
                                               class="custom-control-input" disabled>
                                        <label class="custom-control-label" for="customRadio3">Disabled custom
                                            radio</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="customCheck1"
                                               checked>
                                        <label class="custom-control-label" for="customCheck1">Check this custom
                                            checkbox</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="customCheck2"
                                               disabled>
                                        <label class="custom-control-label" for="customCheck2">Disabled custom
                                            checkbox</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="customSwitch1"
                                               checked>
                                        <label class="custom-control-label" for="customSwitch1">Toggle this switch
                                            element</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" disabled
                                               id="customSwitch2">
                                        <label class="custom-control-label" for="customSwitch2">Disabled switch
                                            element</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <select class="custom-select">
                                        <option selected>Open this select menu</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="input-group mb-3">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="inputGroupFile02">
                                            <label class="custom-file-label" for="inputGroupFile02">Choose
                                                file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="">Upload</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Navs
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="navs">Navs</h2>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-bottom: 2rem;">
                    <div class="col-sm-6">
                        <h2 id="nav-tabs">Tabs</h2>
                        <div class="bs-component">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link disabled" href="#">Disabled</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
                                       role="button"
                                       aria-haspopup="true"
                                       aria-expanded="false">Dropdown</a>
                                    <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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade show active" id="home">
                                    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
                                        tofu
                                        stumptown aliqua, retro
                                        synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
                                        helvetica. Reprehenderit
                                        butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui
                                        irure
                                        terry richardson ex
                                        squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
                                        american apparel, butcher
                                        voluptate nisi qui.</p>
                                </div>
                                <div class="tab-pane fade" id="profile">
                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
                                        coffee
                                        squid. Exercitation
                                        +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
                                        four loko farm-to-table
                                        craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk
                                        aliquip jean shorts
                                        ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore
                                        aesthetic
                                        magna delectus mollit.</p>
                                </div>
                                <div class="tab-pane fade" id="dropdown1">
                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
                                        mcsweeney's organic lomo retro
                                        fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
                                        tattooed craft beer, iphone
                                        skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth
                                        PBR
                                        banksy irony. Leggings
                                        gentrify squid 8-bit cred pitchfork.</p>
                                </div>
                                <div class="tab-pane fade" id="dropdown2">
                                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
                                        before
                                        they sold out master
                                        cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
                                        portland
                                        seitan DIY, art party
                                        locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY
                                        salvia
                                        PBR, banh mi before
                                        they sold out farm-to-table VHS viral locavore cosby sweater.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <h2 id="nav-pills">Pills</h2>
                        <div class="bs-component">
                            <ul class="nav nav-pills">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#">Active</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
                                       role="button"
                                       aria-haspopup="true"
                                       aria-expanded="false">Dropdown</a>
                                    <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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </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>
                        <br>
                        <div class="bs-component">
                            <ul class="nav nav-pills flex-column">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#">Active</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
                                       role="button"
                                       aria-haspopup="true"
                                       aria-expanded="false">Dropdown</a>
                                    <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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                </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>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
                        <div class="bs-component">
                            <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 active">Library</li>
                            </ol>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Library</a></li>
                                <li class="breadcrumb-item active">Data</li>
                            </ol>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <h2 id="pagination">Pagination</h2>
                        <div class="bs-component">
                            <div>
                                <ul class="pagination">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">&laquo;</a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item">
                                        <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="#">4</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">5</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">&raquo;</a>
                                    </li>
                                </ul>
                            </div>

                            <div>
                                <ul class="pagination pagination-lg">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">&laquo;</a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item">
                                        <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="#">4</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">5</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">&raquo;</a>
                                    </li>
                                </ul>
                            </div>

                            <div>
                                <ul class="pagination pagination-sm">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">&laquo;</a>
                                    </li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">1</a>
                                    </li>
                                    <li class="page-item">
                                        <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="#">4</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">5</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">&raquo;</a>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- Indicators
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="indicators">Indicators</h2>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <h2>Alerts</h2>
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-warning">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <h4 class="alert-heading">Warning!</h4>
                                <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit
                                    libero, a pharetra augue.
                                    Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque
                                        nisl
                                        consectetur et</a>.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-danger">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
                                and
                                try submitting
                                again.
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-success">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
                                important alert
                                message</a>.
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-info">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
                                attention</a>, but it's not
                                super important.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-primary">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
                                and
                                try submitting
                                again.
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-secondary">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
                                important alert
                                message</a>.
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-light">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
                                attention</a>, but it's not
                                super important.
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h2>Badges</h2>
                    <div class="bs-component" style="margin-bottom: 40px;">
                        <span class="badge badge-primary">Primary</span>
                        <span class="badge badge-secondary">Secondary</span>
                        <span class="badge badge-success">Success</span>
                        <span class="badge badge-danger">Danger</span>
                        <span class="badge badge-warning">Warning</span>
                        <span class="badge badge-info">Info</span>
                        <span class="badge badge-light">Light</span>
                        <span class="badge badge-dark">Dark</span>
                    </div>
                    <div class="bs-component">
                        <span class="badge badge-pill badge-primary">Primary</span>
                        <span class="badge badge-pill badge-secondary">Secondary</span>
                        <span class="badge badge-pill badge-success">Success</span>
                        <span class="badge badge-pill badge-danger">Danger</span>
                        <span class="badge badge-pill badge-warning">Warning</span>
                        <span class="badge badge-pill badge-info">Info</span>
                        <span class="badge badge-pill badge-light">Light</span>
                        <span class="badge badge-pill badge-dark">Dark</span>
                    </div>
                </div>
            </div>

            <!-- Progress
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="progress">Progress</h2>
                        </div>

                        <h3 id="progress-basic">Basic</h3>
                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
                                     aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                        </div>

                        <h3 id="progress-alternatives">Contextual alternatives</h3>
                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%"
                                     aria-valuenow="25" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%"
                                     aria-valuenow="50" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"
                                     aria-valuenow="75" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%"
                                     aria-valuenow="100"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                        <h3 id="progress-multiple">Multiple bars</h3>
                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
                                     aria-valuemin="0"
                                     aria-valuemax="100"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
                                     aria-valuenow="30" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                                <div class="progress-bar bg-info" role="progressbar" style="width: 20%"
                                     aria-valuenow="20" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                        </div>

                        <h3 id="progress-striped">Striped</h3>
                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
                                     aria-valuenow="10"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
                                     style="width: 25%"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar"
                                     style="width: 50%" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                     style="width: 75%"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
                                     style="width: 100%"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                        <h3 id="progress-animated">Animated</h3>
                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                     role="progressbar"
                                     aria-valuenow="75"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Containers
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="containers">Containers</h2>
                        </div>
                        <div class="bs-component">
                            <div class="jumbotron">
                                <h1 class="display-3">Hello, world!</h1>
                                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for
                                    calling extra attention
                                    to featured content or information.</p>
                                <hr class="my-4">
                                <p>It uses utility classes for typography and spacing to space content out within
                                    the
                                    larger container.</p>
                                <p class="lead">
                                    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-12">
                        <h2>List groups</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Cras justo odio
                                    <span class="badge badge-primary badge-pill">14</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Dapibus ac facilisis in
                                    <span class="badge badge-primary badge-pill">2</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    Morbi leo risus
                                    <span class="badge badge-primary badge-pill">1</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="list-group">
                                <a href="#" class="list-group-item list-group-item-action active">
                                    Cras justo odio
                                </a>
                                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
                                </a>
                                <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="list-group">
                                <a href="#"
                                   class="list-group-item list-group-item-action flex-column align-items-start active">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">List group item heading</h5>
                                        <small>3 days ago</small>
                                    </div>
                                    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
                                        diam
                                        eget risus varius
                                        blandit.</p>
                                    <small>Donec id elit non mi porta.</small>
                                </a>
                                <a href="#"
                                   class="list-group-item list-group-item-action flex-column align-items-start">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">List group item heading</h5>
                                        <small class="text-muted">3 days ago</small>
                                    </div>
                                    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
                                        diam
                                        eget risus varius
                                        blandit.</p>
                                    <small class="text-muted">Donec id elit non mi porta.</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <h2>Cards</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Primary card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Secondary card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Success card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Danger card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Warning card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Info card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card bg-light mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Light card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Dark card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="card border-primary mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Primary card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-secondary mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Secondary card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-success mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Success card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-danger mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Danger card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-warning mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Warning card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-info mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Info card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-light mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Light card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                            <div class="card border-dark mb-3" style="max-width: 20rem;">
                                <div class="card-header">Header</div>
                                <div class="card-body">
                                    <h4 class="card-title">Dark card title</h4>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="bs-component">
                            <div class="card mb-3">
                                <h3 class="card-header">Card header</h3>
                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>
                                    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                                </div>
                                <img style="height: 200px; width: 100%; display: block;"
                                     src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                     alt="Card image">
                                <div class="card-body">
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">Cras justo odio</li>
                                    <li class="list-group-item">Dapibus ac facilisis in</li>
                                    <li class="list-group-item">Vestibulum at eros</li>
                                </ul>
                                <div class="card-body">
                                    <a href="#" class="card-link">Card link</a>
                                    <a href="#" class="card-link">Another link</a>
                                </div>
                                <div class="card-footer text-muted">
                                    2 days ago
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">Card title</h4>
                                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                    <p class="card-text">Some quick example text to build on the card title and make
                                        up
                                        the bulk of the
                                        card's content.</p>
                                    <a href="#" class="card-link">Card link</a>
                                    <a href="#" class="card-link">Another link</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Dialogs
                  ================================================== -->
            <div class="bs-docs-section">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <h2 id="dialogs">Dialogs</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <h2>Modals</h2>
                        <div class="bs-component">
                            <div class="modal">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Modal title</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Modal body text goes here.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                Close
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <h2>Popovers</h2>
                        <div class="bs-component" style="margin-bottom: 3em;">
                            <button type="button" class="btn btn-secondary" title="Popover Title"
                                    data-container="body"
                                    data-toggle="popover"
                                    data-placement="left"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left
                            </button>

                            <button type="button" class="btn btn-secondary" title="Popover Title"
                                    data-container="body"
                                    data-toggle="popover"
                                    data-placement="top"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
                            </button>

                            <button type="button" class="btn btn-secondary" title="Popover Title"
                                    data-container="body"
                                    data-toggle="popover"
                                    data-placement="bottom" data-content="Vivamus
                sagittis lacus vel augue laoreet rutrum faucibus.">Bottom
                            </button>

                            <button type="button" class="btn btn-secondary" title="Popover Title"
                                    data-container="body"
                                    data-toggle="popover"
                                    data-placement="right"
                                    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right
                            </button>
                        </div>
                        <h2>Tooltips</h2>
                        <div class="bs-component">
                            <button type="button" class="btn btn-secondary" data-toggle="tooltip"
                                    data-placement="left"
                                    title="Tooltip on left">Left
                            </button>

                            <button type="button" class="btn btn-secondary" data-toggle="tooltip"
                                    data-placement="top"
                                    title="Tooltip on top">Top
                            </button>

                            <button type="button" class="btn btn-secondary" data-toggle="tooltip"
                                    data-placement="bottom" title="Tooltip on bottom">Bottom
                            </button>

                            <button type="button" class="btn btn-secondary" data-toggle="tooltip"
                                    data-placement="right"
                                    title="Tooltip on right">Right
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div id="source-modal" class="modal fade">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Source Code</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                            </button>
                        </div>
                        <div class="modal-body">
                            <pre contenteditable></pre>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import {mapActions, mapState} from "vuex";
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";

export default {
    name: "Swatch",
    components: {
        BaseLayout,
        ...BIcons
    },
    computed: {
        ...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
    },
    methods: {
        ...mapActions(["fetchInfo", "fetchStorageLocations"])
    },
    async mounted() {
        await this.fetchInfo();
        await this.fetchStorageLocations();
    }
}
</script>

<style scoped>

</style>