
<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <p class="lead">Lead paragraph. A wonderful serenity has taken possession of my entire soul.</p>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <p>Paragraph. Then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing.</p>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h6>Heading 6</h6>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h5>Heading 5</h5>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h4>Heading 4 <span class="badge badge-pill badge-warning">!</span></h4>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h3>Heading 3 <span class="badge badge-light"> New</span></h3>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h2>Heading 2 <small class="text-muted">subtitle</small></h2>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 >Heading 1</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-6">Display 6</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-5">Display 5</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-4">Display 4</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-3">Display 3</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-2">Display 2</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <h1 class="display-1">Display 1</h1>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <p class="text-monospace">Monospace. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</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 <cite title="Source Title">My memories</cite></div>
    </div>
</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)">
    <ol ype="a">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <ol type="A">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
</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="table-responsive">
        <table class="table table-bordered ">
            <thead class="thead-dark">
                <tr>
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
            </tbody>
        </table>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="table-responsive">
        <table class="table table-striped table-borderless">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
            </tbody>
        </table>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="table-responsive">
        <table class="table table-striped table-dark">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
            </tbody>
        </table>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <figure class="text-center">
        <blockquote class="blockquote">
            <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
        </figcaption>
    </figure>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <figure class="text-end">
        <blockquote class="blockquote">
            <p>A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
        </figcaption>
    </figure>
</li>
