<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-6"><p>col-md-6</p></div>
        <div class="col-md-6"><p>col-md-6</p></div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-4"><p>col-md-4</p></div>
        <div class="col-md-4"><p>col-md-4</p></div>
        <div class="col-md-4"><p>col-md-4</p></div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-3"><p>col-md-3</p></div>
        <div class="col-md-3"><p>col-md-3</p></div>
        <div class="col-md-3"><p>col-md-3</p></div>
        <div class="col-md-3"><p>col-md-3</p></div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-4"><p>col-md-4</p></div>
        <div class="col-md-8"><p>col-md-8</p></div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-8"><p>col-md-8</p></div>
        <div class="col-md-4"><p>col-md-4</p></div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-3"><p>col-md-3</p></div>
        <div class="col-md-9"><p>col-md-9</p></div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="row">
        <div class="col-md-9"><p>col-md-9</p></div>
        <div class="col-md-3"><p>col-md-3</p></div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-1">Title</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1>Heading</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h2>Heading</h2>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <p class="lead">Lead paragraph </p>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class="list-inline">
        <li class="list-inline-item">One</li>
        <li class="list-inline-item">Two</li>
        <li class="list-inline-item">Three</li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="blockquote">
        <p class="mb-0">Blockquoute</p>
        <div class="blockquote-footer">Someone famous in My memories</div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-primary" href="#">Button </a> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group"> 
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> 
        </div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group"> 
        <a href="#" class="btn btn-primary">Btn 1</a> 
        <a href="#" class="btn btn-primary">Btn 2</a> 
        <a href="#" class="btn btn-primary">Btn 3</a> 
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a href="#" class="btn btn-outline-primary">Button</a> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group">
        <button class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group"> 
        <a href="#" class="btn btn-outline-primary">Btn 1</a> 
        <a href="#" class="btn btn-outline-primary">Btn 2</a> 
        <a href="#" class="btn btn-outline-primary">Btn 3</a> 
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg">
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pi-wrapper">
        <iframe  width="100%" height="400" src="https://maps.google.com/maps?hl=en&amp;q=New%20York&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" scrolling="no" frameborder="0"></iframe>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active"> <img class="d-block img-fluid w-100" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg">
                <div class="carousel-caption">
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item"> <img class="d-block img-fluid w-100" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg">
                <div class="carousel-caption">
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a>    
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ctvlUvN6wSE?autoplay=0" allowfullscreen=""> </iframe> 
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="embed-responsive embed-responsive-4by3"> <video src="<?php echo SITE_PATH; ?>assets/images/video-placeholder.mp4" class="embed-responsive-item" controls="controls">
            Your browser does not support HTML5 video.
        </video> </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <i class="d-block  fa fa-5x fa-font-awesome"></i> <label id="navs">Navs </label>
    <nav class="navbar navbar-expand-md bg-primary navbar-dark">
        <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse text-center justify-content-end"
                 id="navbar2SupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item"> <a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i> Bookmarks</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i> Contacts</a> </li>
                </ul> <a class="btn navbar-btn btn-primary ml-2 text-white"><i class="fa d-inline fa-lg fa-user-circle-o"></i> Sign in</a> </div>
        </div>
    </nav>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class="nav nav-tabs">
        <li class="nav-item"> <a href="#" class="active nav-link"><i class="fa fa-home fa-home"></i>&nbsp;Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Item</a> </li>
        <li class="nav-item"> <a href="#" class="nav-link">Item</a> </li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class="nav nav-pills">
        <li class="nav-item"> <a href="#" class="active nav-link"> <i class="fa fa-home fa-home"></i>&nbsp;Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Item</a> </li>
        <li class="nav-item"> <a href="#" class="nav-link">Item</a> </li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class="nav nav-pills flex-column">
        <li class="nav-item"> <a href="#" class="active nav-link"><i class="fa fa-home fa-home"></i>&nbsp;Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Item</a> </li>
        <li class="nav-item"> <a href="#" class="nav-link">Item</a> </li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class=" breadcrumb" style="margin-bottom:0px;margin-top:0px">
        <li class="breadcrumb-item"> <a href="#">Home</a> </li>
        <li class="breadcrumb-item active">Link</li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ul class="pagination">
        <li class="page-item"> <a class="page-link" href="#"> <span>«</span> <span class="sr-only">Previous</span> </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="#">4</a> </li>
        <li class="page-item"> <a class="page-link" href="#"> <span>»</span> <span class="sr-only">Next</span> </a> </li>
    </ul>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pi-wrapper">
        <ul class="nav nav-pills">
            <li class="nav-item"> <a href="" class="active nav-link" data-toggle="pill" data-target="#tabone">Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="" data-toggle="pill" data-target="#tabtwo">Tab 2</a> </li>
            <li class="nav-item"> <a href="" class="nav-link" data-toggle="pill" data-target="#tabthree">Tab 3</a> </li>
        </ul>
        <div class="tab-content mt-2">
            <div class="tab-pane fade show active" id="tabone" role="tabpanel">
                <p class="">Tab pane one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="tab-pane fade" id="tabtwo" role="tabpanel">
                <p class="">Tab pane two. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="tab-pane fade" id="tabthree" role="tabpanel">
                <p class="">Tab pane three. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="col-12">
        <ul class="nav nav-tabs">
            <li class="nav-item"> <a href="" class="active nav-link" data-toggle="tab" data-target="#tabone">Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="" data-toggle="tab" data-target="#tabtwo">Tab 2</a> </li>
            <li class="nav-item"> <a href="" class="nav-link" data-toggle="tab" data-target="#tabthree">Tab 3</a> </li>
        </ul>
        <div class="tab-content mt-2">
            <div class="tab-pane fade show active" id="tabone" role="tabpanel">
                <p class="">Tab pane one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="tab-pane fade" id="tabtwo" role="tabpanel">
                <p class="">Tab pane two. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="tab-pane fade" id="tabthree" role="tabpanel">
                <p class="">Tab pane three. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div style="width: 690px; min-width: 400px;transform: scale(0.8);transform-origin: center left;margin-bottom: 3.7px;height: 80px;margin-left: 20px">
        <div class="row">
            <div class="col-4">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item"> <a href="" class="active nav-link" data-toggle="pill" data-target="#tabone">Tab 1</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="" data-toggle="pill" data-target="#tabtwo">Tab 2</a> </li>
                    <li class="nav-item"> <a href="" class="nav-link" data-toggle="pill" data-target="#tabthree">Tab 3</a> </li>
                </ul>
            </div>
            <div class="col-8">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tabone" role="tabpanel">
                        <p class="">Tab pane one. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div class="tab-pane fade" id="tabtwo" role="tabpanel">
                        <p class="">Tab pane two. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                    <div class="tab-pane fade" id="tabthree" role="tabpanel">
                        <p class="">Tab pane three. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <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>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <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</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 </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> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="card">
        <div class="card-header"> Header </div>
        <div class="card-body">
            <h4>Card title</h4>
            <h6 class="text-muted">Subtitle</h6>
            <p>Some quick example text to build on the card title .</p>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="card"> <img class="card-img-top" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <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>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="card"> <img class="card-img-top" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg" alt="Card image cap">
        <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>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="card"> <img class="card-img" src="<?php echo SITE_PATH; ?>assets/images/photo-1.jpg" alt="Card image">
        <div class="card-img-overlay d-flex justify-content-center align-items-center">
            <h2 class="text-primary">Card title</h2>
        </div>
    </div> 

</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form class="form">
        <div class="form-group"> <label>Email address</label> <input type="email" class="form-control" placeholder="Enter email"> <small class="form-text text-muted">We'll never share your email with anyone else.</small> </div>
        <div class="form-group"> <label>Password</label> <input type="password" class="form-control" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Submit</button> 
    </form>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form id="c_form-h" class="form" style="max-width:200%; transform-origin: left; transform: scale(0.65);">
        <div class="form-group row"> <label for="inputmailh" class="col-sm-2 col-form-label">E-mail</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputmailh" placeholder="mail@example.com"> </div>
        </div>
        <div class="form-group row"> <label for="inputpasswordh" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputpasswordh" placeholder="Password"> </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form class="form-inline" id="c_form-inline" style="max-width:200%; min-width:160%; transform-origin: left; transform: scale(0.575);">
        <div class="form-group my-2">
            <input type="email" class="form-control" id="inputmailinline" placeholder="mail@example.com"> </div>
        <div class="form-group mx-3 my-2">
            <input type="password" class="form-control" id="inputpasswordinline" placeholder="Password"> </div>
        <button type="submit" class="btn btn-primary my-2">Log in</button>
    </form>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form class="form" id="c_form-complex" style="max-width:200%; min-width:160%; transform-origin: left; transform: scale(0.575);">
        <div class="form-row">
            <div class="form-group col-md-6"> <label for="inputEmail4">Email</label>
                <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div>
            <div class="form-group col-md-6"> <label for="inputPassword4">Password</label>
                <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div>
        </div>
        <div class="form-group"> <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div>
        <div class="form-group"> <label for="inputAddress2">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div>
        <div class="form-row">
            <div class="form-group col-md-6"> <label for="inputCity">City</label>
                <input type="text" class="form-control" id="inputCity"> </div>
            <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control">
                    <option selected="">Choose...</option>
                    <option>...</option>
                </select> </div>
            <div class="form-group col-md-2"> <label for="inputZip">Zip</label>
                <input type="text" class="form-control" id="inputZip"> </div>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck" value="on"> <label class="form-check-label" for="gridCheck">
                    Check me out
                </label> </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </form> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form class="form-inline">
        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email">
            <div class="input-group-append"> <button class="btn btn-primary" type="button">Subscribe</button> </div>
        </div>
    </form> 

</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="alert alert-primary" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button>
        <h4 class="alert-heading">Well done!</h4>
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%">50%</div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-3">Jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
            </tbody>
        </table>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body...</p>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" data-dismiss="modal">Close</a>
                    <a class="btn btn-primary text-white">Save changes</a>
                </div>
            </div>
        </div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <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"> <span>×</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>
</li>
