Simple Order Alignment List Nesting Notation Text Notation Icon Badge Dropdown Labels Checkbox Radio

Simple

pic1

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.

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

pic1

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

pic1

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

pic1

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.

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

  • pic1

    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.

  • pic1

    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.

  • pic1

    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

pic1

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.

pic2

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

pic1

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

pic1

HeadingWeb 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

pic1
Heading
Start chat Make a call Statistics

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>

Copyright © 2024 DesignReset, All rights reserved.

Coded with