Messages

It contains messages drop down part which we can include in Header section.

<div class="dropdown-menu messages_content" aria-labelledby="dropdownMenuButton">
    <div class="msg_title">
        <p class="text-center text-info">3 New Messages</p>
    </div>
    <div class="msg_item">
        <div class="row">
            <div class="col-3">
                <img src="img/people2.png" class="rounded-circle" alt="avatar">
                <span class="text-sm">5:50pm</span>
            </div>
            <div class="col-9">
                <span class="text-info">Brett K. Bennett</span>
                <br/>
                <span class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            </div>
        </div>
    </div>
    <div class="msg_item">
        <div class="row">
            <div class="col-3">
                <img src="img/people5.png" class="rounded-circle" alt="avatar">
                <span class="text-sm">4:45pm</span>
            </div>
            <div class="col-9">
                <span class="text-info">Donald G. Oehler</span>
                <br/>
                <span class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            </div>
        </div>
    </div>
    <div class="msg_item">
        <div class="row">
            <div class="col-3">
                <img src="img/people3.png" class="rounded-circle" alt="avatar">
                <span class="text-sm">3:30pm</span>
            </div>
            <div class="col-9">
                <span class="text-info">Teena F. Larimore</span>
                <br/>
                <span class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            </div>
        </div>
    </div>
    <div class="msg_footer">
        <p class="text-center text-white"><a href="#">Show All Messages</a></p>
    </div>
</div>