Bootstrap snippet and html example. bs5 profile content

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
Tags: profile

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 5.1.3 included, to get the result that you can see in the preview selection

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.css" integrity="sha256-NAxhqDvtY0l4xn+YVa6WjAcmd94NNfttjNsDmNatFVc=" crossorigin="anonymous" />

<div class="container">
    <div class="row">
        <div class="col-xl-5">
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Edit</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Delete</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Block</a>
                        </div>
                    </div>
                    <div class="d-flex align-items-start">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle avatar-lg img-thumbnail" alt="profile-image">
                        <div class="w-100 ms-3">
                            <h4 class="my-0">Geneva McKnight</h4>
                            <p class="text-muted">@webdesigner</p>
                            <button type="button" class="btn btn-soft-primary btn-xs waves-effect mb-2 waves-light">Follow</button>
                            <button type="button" class="btn btn-soft-success btn-xs waves-effect mb-2 waves-light">Message</button>
                        </div>
                    </div>

                    <div class="mt-3">
                        <h4 class="font-13 text-uppercase">About Me :</h4>
                        <p class="text-muted font-13 mb-3">
                            Hi I'm Johnathn Deo,has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
                        </p>
                        <p class="text-muted mb-2 font-13"><strong>Full Name :</strong> <span class="ms-2">Geneva D. McKnight</span></p>
                    
                        <p class="text-muted mb-2 font-13"><strong>Mobile :</strong><span class="ms-2">(123) 123 1234</span></p>
                    
                        <p class="text-muted mb-2 font-13"><strong>Email :</strong> <span class="ms-2">[email protected]</span></p>
                    
                        <p class="text-muted mb-1 font-13"><strong>Location :</strong> <span class="ms-2">USA</span></p>
                    </div>                                    

                    <ul class="social-list list-inline mt-3 mb-0">
                        <li class="list-inline-item">
                            <a href="javascript: void(0);" class="social-list-item text-center border-primary text-primary"><i class="mdi mdi-facebook"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="javascript: void(0);" class="social-list-item text-center border-danger text-danger"><i class="mdi mdi-google"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="javascript: void(0);" class="social-list-item text-center border-info text-info"><i class="mdi mdi-twitter"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="javascript: void(0);" class="social-list-item text-center border-secondary text-secondary"><i class="mdi mdi-github"></i></a>
                        </li>
                    </ul>   
                </div>                                 
            </div> <!-- end card -->

            <div class="card">
                <div class="card-body text-center">
                    <div class="row">
                        <div class="col-4 border-end border-light">
                            <h5 class="text-muted mt-1 mb-2 fw-normal">Applied</h5>
                            <h2 class="mb-0 fw-bold">116</h2>
                        </div>
                        <div class="col-4 border-end border-light">
                            <h5 class="text-muted mt-1 mb-2 fw-normal">Reviewed</h5>
                            <h2 class="mb-0 fw-bold">87</h2>
                        </div>
                        <div class="col-4">
                            <h5 class="text-muted mt-1 mb-2 fw-normal">Contacted</h5>
                            <h2 class="mb-0 fw-bold">98</h2>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-3">Inbox</h4>

                    <div class="inbox-widget" data-simplebar="init" style="max-height: 350px;"><div class="simplebar-wrapper" style="margin: 0px;"><div class="simplebar-height-auto-observer-wrapper"><div class="simplebar-height-auto-observer"></div></div><div class="simplebar-mask"><div class="simplebar-offset" style="right: 0px; bottom: 0px;"><div class="simplebar-content-wrapper" style="height: auto; overflow: hidden scroll;"><div class="simplebar-content" style="padding: 0px;">
                        <div class="d-flex align-items-center pb-1" id="tooltips-container">
                            <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Tomaslau</h5>
                                <p class="mb-0 font-13">I've finished it! See you so...</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container1">
                            <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Stillnotdavid</h5>
                                <p class="mb-0 font-13">This theme is awesome!</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container1" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container2">
                            <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Shahedk</h5>
                                <p class="mb-0 font-13">Hey! there I'm available...</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container2" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container3">
                            <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Kurafire</h5>
                                <p class="mb-0 font-13">Nice to meet you</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container3" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container4">
                            <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Adhamdannaway</h5>
                                <p class="mb-0 font-13">This theme is awesome!</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container4" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container5">
                            <img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Tomaslau</h5>
                                <p class="mb-0 font-13">I've finished it! See you so...</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container5" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center py-1" id="tooltips-container6">
                            <img src="https://bootdey.com/img/Content/avatar/avatar8.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Shahedk</h5>
                                <p class="mb-0 font-13">Hey! there I'm available...</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container6" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                        <div class="d-flex align-items-center pt-1" id="tooltips-container7">
                            <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                            <div class="w-100 ms-3">
                                <h5 class="mb-1">Stillnotdavid</h5>
                                <p class="mb-0 font-13">This theme is awesome!</p>
                            </div>
                            <a href="javascript:(0);" class="btn btn-sm btn-soft-info font-13" data-bs-container="#tooltips-container7" data-bs-toggle="tooltip" data-bs-placement="left" title="" data-bs-original-title="Reply"> <i class="mdi mdi-reply"></i> </a>
                        </div>
                    </div></div></div></div><div class="simplebar-placeholder" style="width: auto; height: 532px;"></div></div><div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"><div class="simplebar-scrollbar" style="width: 0px; display: none;"></div></div><div class="simplebar-track simplebar-vertical" style="visibility: visible;"><div class="simplebar-scrollbar" style="height: 230px; transform: translate3d(0px, 0px, 0px); display: block;"></div></div></div> <!-- end inbox-widget -->
                </div>
            </div> <!-- end card-->
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Sales Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Profit</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Team Members <i class="mdi mdi-account-multiple ms-1"></i></h4>

                    <div class="list-group">
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex align-items-center pb-1" id="tooltips-container">
                                <img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1">Herbert Stewart<i class="mdi mdi-check-decagram text-info ms-1"></i></h5>
                                    <p class="mb-0 font-13 text-muted">Co Founder</p>
                                </div>
                                <i class="mdi mdi-chevron-right h2"></i>
                            </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex align-items-center pb-1" id="tooltips-container">
                                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1">Terry Mouser</h5>
                                    <p class="mb-0 font-13 text-muted">Web Designer</p>
                                </div>
                                <i class="mdi mdi-chevron-right h2"></i>
                            </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex align-items-center pb-1" id="tooltips-container">
                                <img src="https://bootdey.com/img/Content/avatar/avatar8.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1">Adam Barney</h5>
                                    <p class="mb-0 font-13 text-muted">PHP Developer</p>
                                </div>
                                <i class="mdi mdi-chevron-right h2"></i>
                            </div>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <div class="d-flex align-items-center pb-1" id="tooltips-container">
                                <img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="rounded-circle img-fluid avatar-md img-thumbnail bg-transparent" alt="">
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1">Michal Chang</h5>
                                    <p class="mb-0 font-13 text-muted">UI/UX Designer</p>
                                </div>
                                <i class="mdi mdi-chevron-right h2"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Sales Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Profit</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Upcoming Reminders <i class="mdi mdi-adjust ms-1"></i></h4>

                    <div class="list-group">
                        <a href="#" class="my-1">
                            <div class="d-flex align-items-start" id="tooltips-container">
                                <div class="">
                                    <i class="mdi mdi-circle h3 text-primary"></i>
                                </div>
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1 mt-0">New Admin Layout Discuss</h5>
                                    <ul class="list-inline text-muted font-12">
                                        <li class="list-inline-item"><i class="mdi mdi-calendar-blank-outline me-1"></i>10 May 2021</li>
                                        <li class="list-inline-item"> - </li>
                                        <li class="list-inline-item"><i class="mdi mdi-clock-time-eight-outline me-1"></i>09:00am <span class="px-1">To</span> 10:30am</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="my-1">
                            <div class="d-flex align-items-start" id="tooltips-container">
                                <div class="">
                                    <i class="mdi mdi-circle h3 text-pink"></i>
                                </div>
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1 mt-0">Landing Pages Planning</h5>
                                    <ul class="list-inline text-muted font-12">
                                        <li class="list-inline-item"><i class="mdi mdi-calendar-blank-outline me-1"></i>10 May 2021</li>
                                        <li class="list-inline-item"> - </li>
                                        <li class="list-inline-item"><i class="mdi mdi-clock-time-eight-outline me-1"></i>02:00pm <span class="px-1">To</span> 4:00pm</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="my-1">
                            <div class="d-flex align-items-start" id="tooltips-container">
                                <div class="">
                                    <i class="mdi mdi-circle h3 text-success"></i>
                                </div>
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1 mt-0">Meet Our Clients</h5>
                                    <ul class="list-inline text-muted font-12">
                                        <li class="list-inline-item"><i class="mdi mdi-calendar-blank-outline me-1"></i>11 May 2021</li>
                                        <li class="list-inline-item"> - </li>
                                        <li class="list-inline-item"><i class="mdi mdi-clock-time-eight-outline me-1"></i>08:00am <span class="px-1">To</span> 11:20am</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="my-1">
                            <div class="d-flex align-items-start" id="tooltips-container">
                                <div class="">
                                    <i class="mdi mdi-circle h3 text-warning"></i>
                                </div>
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1 mt-0">Project Discussion</h5>
                                    <ul class="list-inline text-muted font-12">
                                        <li class="list-inline-item"><i class="mdi mdi-calendar-blank-outline me-1"></i>11 May 2021</li>
                                        <li class="list-inline-item"> - </li>
                                        <li class="list-inline-item"><i class="mdi mdi-clock-time-eight-outline me-1"></i>12:00am <span class="px-1">To</span> 03:00am</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="my-1">
                            <div class="d-flex align-items-start" id="tooltips-container">
                                <div class="">
                                    <i class="mdi mdi-circle h3 text-dark"></i>
                                </div>
                                <div class="w-100 ms-2">
                                    <h5 class="mb-1 mt-0">Businees Meeting</h5>
                                    <ul class="list-inline text-muted font-12">
                                        <li class="list-inline-item"><i class="mdi mdi-calendar-blank-outline me-1"></i>12 May 2021</li>
                                        <li class="list-inline-item"> - </li>
                                        <li class="list-inline-item"><i class="mdi mdi-clock-time-eight-outline me-1"></i>08:30am <span class="px-1">To</span> 10:00am</li>
                                    </ul>
                                </div>
                            </div>
                        </a>
                        
                    </div>
                </div>
            </div>
        </div> <!-- end col-->

        <div class="col-xl-7">
            <div class="card">
                <div class="card-body">
                    <!-- comment box -->
                    <form action="#" class="comment-area-box mb-3">
                        <span class="input-icon">
                            <textarea rows="3" class="form-control" placeholder="Write something..."></textarea>
                        </span>
                        <div class="comment-area-btn">
                            <div class="float-end">
                                <button type="submit" class="btn btn-sm btn-dark waves-effect waves-light">Post</button>
                            </div>
                            <div>
                                <a href="#" class="btn btn-sm btn-light text-black-50"><i class="far fa-user"></i></a>
                                <a href="#" class="btn btn-sm btn-light text-black-50"><i class="fa fa-map-marker-alt"></i></a>
                                <a href="#" class="btn btn-sm btn-light text-black-50"><i class="fa fa-camera"></i></a>
                                <a href="#" class="btn btn-sm btn-light text-black-50"><i class="far fa-smile"></i></a>
                            </div>
                        </div>
                    </form>
                    <!-- end comment box -->

                    <!-- Story Box-->
                    <div class="border border-light p-2 mb-3">
                        <div class="d-flex align-items-start">
                            <img class="me-2 avatar-sm rounded-circle" src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="Generic placeholder image">
                            <div class="w-100">
                                <h5 class="">Thelma Fridley <small class="text-muted"> 1 hour ago</small></h5>
                                <div class="">
                                    Cras sit amet nibh libero, in
                                    gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                                    purus odio, vestibulum in vulputate at, tempus viverra turpis. Duis
                                    sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
                                    porta. Mauris massa.
                                    <br>
                                    <a href="javascript: void(0);" class="text-muted font-13 d-inline-block mt-2"><i class="mdi mdi-reply"></i> Reply</a>
                                </div>
                            </div>
                            
                        </div>
                        

                        <div class="post-user-comment-box">
                            <div class="d-flex align-items-start">
                                <img class="me-2 avatar-sm rounded-circle" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image">
                                <div class="w-100">
                                    <h5 class="mt-0">Jeremy Tomlinson <small class="text-muted">3 hours ago</small></h5>
                                    Nice work, makes me think of The Money Pit.

                                    <br>
                                    <a href="javascript: void(0);" class="text-muted font-13 d-inline-block mt-2"><i class="mdi mdi-reply"></i> Reply</a>

                                    <div class="d-flex align-items-start mt-3">
                                        <a class="pe-2" href="#">
                                            <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="avatar-sm rounded-circle" alt="Generic placeholder image">
                                        </a>
                                        <div class="w-100">
                                            <h5 class="mt-0">Kathleen Thomas <small class="text-muted">5 hours ago</small></h5>
                                            i'm in the middle of a timelapse animation myself! (Very different though.) Awesome stuff.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex align-items-start mt-2">
                                <a class="pe-2" href="#">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle" alt="Generic placeholder image" height="31">
                                </a>
                                <div class="w-100">
                                    <input type="text" id="simpleinput" class="form-control border-0 form-control-sm" placeholder="Add comment">
                                </div>
                            </div>
                        </div>

                        <div class="mt-2">
                            <a href="javascript: void(0);" class="btn btn-sm btn-link text-danger"><i class="mdi mdi-heart"></i> Like (28)</a>
                            <a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class="mdi mdi-share-variant"></i> Share</a>
                        </div>
                    </div>

                    <!-- Story Box-->
                    <div class="border border-light p-2 mb-3">
                        <div class="d-flex align-items-start">
                            <img class="me-2 avatar-sm rounded-circle" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image">
                            <div class="w-100">
                                <h5 class="m-0">Jeremy Tomlinson</h5>
                                <p class="text-muted"><small>about 2 minuts ago</small></p>
                            </div>
                        </div>
                        <p>Story based around the idea of time lapse, animation to post soon!</p>

                        <img src="https://www.bootdey.com/image/800x540/FF7F50/000000" alt="post-img" class="rounded me-1" height="60">
                        <img src="https://www.bootdey.com/image/800x540/FF7F50/000000" alt="post-img" class="rounded me-1" height="60">
                        <img src="https://www.bootdey.com/image/800x540/FF7F50/000000" alt="post-img" class="rounded" height="60">

                        <div class="mt-2">
                            <a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class="mdi mdi-reply"></i> Reply</a>
                            <a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class="mdi mdi-heart-outline"></i> Like</a>
                            <a href="javascript: void(0);" class="btn btn-sm btn-link text-muted"><i class="mdi mdi-share-variant"></i> Share</a>
                        </div>
                    </div>

                    <!-- Story Box-->
                    <div class="border border-light p-2 mb-3">
                        <div class="d-flex align-items-start">
                            <img class="me-2 avatar-sm rounded-circle" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Generic placeholder image">
                            <div class="w-100">
                                <h5 class="m-0">Jeremy Tomlinson</h5>
                                <p class="text-muted"><small>15 hours ago</small></p>
                            </div>
                        </div>
                        <p>The parallax is a little odd but O.o that house build is awesome!!</p>

                        <iframe src="https://player.vimeo.com/video/87993762" height="300" class="img-fluid border-0"></iframe>
                    </div>

                    <div class="text-center">
                        <a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading me-1"></i> Load more </a>
                    </div>
                </div>
            </div> <!-- end card-->

        </div> <!-- end col -->
    </div>
    <!-- end row-->

</div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 5.1.3 included, to get the result that you can see in the preview selection

body{
    background-color:#ecf2f5;
    margin-top:20px;
}

.card {
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
    margin-bottom: 24px;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid #ecf2f5;
    border-radius: .25rem;
}
.avatar-lg {
    height: 4.5rem;
    width: 4.5rem;
}
.rounded-circle {
    border-radius: 50%!important;
}
.img-thumbnail {
    padding: .25rem;
    background-color: #ecf2f5;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}
.avatar-sm {
    height: 2.25rem;
    width: 2.25rem;
}
.rounded-circle {
    border-radius: 50%!important;
}
.me-2 {
    margin-right: .75rem!important;
}
.avatar-md {
    height: 3.5rem;
    width: 3.5rem;
}
.rounded-circle {
    border-radius: 50%!important;
}
.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent!important;
}
.post-user-comment-box {
    background-color: #f2f8fb;
    margin: 0 -.75rem;
    padding: 1rem;
    margin-top: 20px;
}
.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit;
}
.simplebar-height-auto-observer-wrapper {
    box-sizing: inherit!important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0;
}
.font-13 {
    font-size: 13px!important;
}
.btn-soft-info {
    color: #45bbe0;
    background-color: rgba(69,187,224,.18);
    border-color: rgba(69,187,224,.12);
}
.social-list-item {
    height: 2rem;
    width: 2rem;
    line-height: calc(2rem - 2px);
    display: block;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    color: #adb5bd;
}
.comment-area-box .comment-area-btn {
    background-color: #f2f8fb;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .2rem .2rem;
}

Similar snippets

Bootstrap example and template. List user profiles

List user profiles

Bootstrap example and template. account settings

account settings

Bootstrap example and template. Table user information

Table user information

Bootstrap example and template. Profile canvas

Profile canvas

Bootstrap example and template. bs5 dark footer

bs5 dark footer

Bootstrap example and template. profile edit data and skills

profile edit data and skills

Bootstrap example and template. Gradients dashboard cards

Gradients dashboard cards

Bootstrap example and template. invoice with client info description amount and pay now button

invoice with client info description amount and pay now button

Bootstrap example and template. bs5 profile content

About this bootstrap example/template

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This code example currectly have 15.0K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 5.1.3

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>

<script src='https://cdn.jsdelivr.net/npm/bootstra[email protected]/dist/js/bootstrap.bundle.min.js'></script>

This code example is based on bootstrap 5.1.3 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working