#### Simple

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

    <!-- Simple -->
    <div class="media">
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
    </div>

#### Order

#### Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

    <!-- Order -->
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">
                Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
            </p>
        </div>
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
    </div>

#### Top-aligned media

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.

    <!-- Top Aligned Media -->
    <div class="media">
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.</p>
        </div>
    </div>

#### Center-aligned media

#### Heading

Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

    <!-- Center Aligned Media -->
    <div class="media">
        <img class="align-self-center rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
        </div>
    </div>

#### Bottom-aligned media

#### Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Fusce condimentum cursus mauris et ornare.

    <!-- Bottom Aligned Media -->
    <div class="media">
        <img class="align-self-end rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Fusce condimentum cursus mauris et ornare.</p>
        </div>
    </div>

#### Right Aligned

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

    <!-- Right Aligned -->
    <div class="media">
        <div class="media-body text-right">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
    </div>

#### Media list

- #### Heading

  Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

- #### Heading

  Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

- #### Heading

  Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

    <!-- Media List -->
    <ul class="list-unstyled">
        <li class="media">
            <img class="rounded" src="../src/assets/img/profile-3.jpeg" alt="pic1">
            <div class="media-body">
                <h4 class="media-heading">Heading</h4>
                <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
            </div>
        </li>
        <li class="media">
            <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
            <div class="media-body">
                <h4 class="media-heading">Heading</h4>
                <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
            </div>
        </li>
        <li class="media">
            <img class="rounded" src="../src/assets/img/profile-5.jpeg" alt="pic1">
            <div class="media-body">
                <h4 class="media-heading">Heading</h4>
                <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
            </div>
        </li>
    </ul>

#### Nesting

#### Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

#### Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

    <!-- Nesting -->
    <div class="media">
        <img class="meta-usr-img rounded" src="../src/assets/img/profile-3.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>

            <div class="media">
                <a class="meta-usr-img" href="javascript:void(0);">
                    <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic2">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">Heading</h4>
                    <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
                </div>
            </div>
        </div>
    </div>

#### Notation Text

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

Reply Edit Delete

    <!-- Notation Text -->
    <div class="media">
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
            <div class="media-notation">
                <a href="javascript:void(0);" class=""> Reply </a>
                <a href="javascript:void(0);" class=""> Edit </a>
                <a href="javascript:void(0);" class=""> Delete </a>
            </div>
        </div>
    </div>

#### Badge

#### Heading Web Designer

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

    <!-- Badge -->
    <div class="media">
        <img class="rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span><span class="badge badge-primary">Web Designer</span></h4>
            <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
        </div>
    </div>

#### Dropdown List

Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

    <!-- Dropdown List -->
    <div class="media">
        <img class=" rounded" src="../src/assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
                <span class="dropdown-list dropdown">
                    <i role="menu" class="flaticon-dot-three sr-only" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">sdfdsf</i>
                    <svg> ... </svg>

                  <span class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                    <a class="dropdown-item" href="javascript:void(0);"><span>Start chat</span> <svg> ... </svg></a>
                    <a class="dropdown-item" href="javascript:void(0);"><span>Make a call</span> <svg> ... </svg></a>
                    <span class="dropdown-divider"></span>
                    <a class="dropdown-item" href="javascript:void(0);"><span>Statistics</span> <svg> ... </svg></a>
                  </span>
                </span>
            </h4>
            <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
        </div>
    </div>

#### Labels

#### Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

    <!-- Label -->
    <div class="media">
        <svg> ... </svg>
        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
        </div>
    </div>

    <div class="media">
        <svg> ... </svg>
        <div class="media-body mb-2">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
    </div>

#### Checkbox

#### Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

    <!-- Checkbox -->
    <div class="media">
        <div class="form-check me-3">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
            <label class="form-check-label" for="flexRadioDefault1">
            </label>
        </div>

        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
        </div>
    </div>

    <div class="media">
        <div class="form-check me-3">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
            <label class="form-check-label" for="flexRadioDefault1">
            </label>
        </div>

        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
    </div>

#### Radio

#### Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

#### Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

    <!-- Radio -->
    <div class="media">
            <div class="form-check me-3">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                <label class="form-check-label" for="flexRadioDefault1">
                </label>
            </div>

        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
    </div>

    <div class="media">
        <div class="form-check me-3">
            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
            <label class="form-check-label" for="flexRadioDefault1">
            </label>
        </div>

        <div class="media-body">
            <h4 class="media-heading"><span class="media-title"> Heading</span>
            </h4>
            <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
        </div>
    </div>