Bootstrap snippet. bs4 employers list

This Bootstrap snippet. bs4 employers list, was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: employers

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css" rel="stylesheet">
<div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="show-results mt-4">
                        <div class="float-left">
                            <h5 class="text-dark mb-0 pt-2">Showing  Results : 1-9 of 300</h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3">
                    <div class="left-sidebar">
                        <div class="accordion" id="accordionExample">
                            <div class="card mt-4">
                                <a data-toggle="collapse" href="#collapseOne" class="job-list" aria-expanded="true" aria-controls="collapseOne">
                                    <div class="card-header" id="headingOne">
                                        <h6 class="mb-0 text-dark f-18">Last Activity</h6>
                                    </div>
                                </a>
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                                    <div class="card-body p-0">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio1">Last Hour</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio2">Last 24 hours</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio3">Last 7 days</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio4" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio4">Last 14 days</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio5" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio5">Last 30 days</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- collapse one end -->
                            <div class="card mt-4">
                                <a data-toggle="collapse" href="#collapsetwo" class="job-list" aria-expanded="true" aria-controls="collapsetwo">
                                    <div class="card-header" id="headingtwo">
                                        <h6 class="mb-0 text-dark f-18">Team Size</h6>
                                    </div>
                                </a>
                                <div id="collapsetwo" class="collapse show" aria-labelledby="headingtwo">
                                    <div class="card-body p-0">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck7">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck7">1 To 50</label>
                                        </div>

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck8">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck8">51 To 100</label>
                                        </div>

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck3">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck3">101 To 150</label>
                                        </div>

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck4">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck4">151 To 200</label>
                                        </div>

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck5">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck5">201 To 250</label>
                                        </div>

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck6">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customCheck6">251 To 300</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- collapse one end -->
                            <div class="card mt-4">
                                <a data-toggle="collapse" href="#collapsethree" class="job-list" aria-expanded="true" aria-controls="collapsethree">
                                    <div class="card-header" id="headingthree">
                                        <h6 class="mb-0 text-dark f-18">Categories</h6>
                                    </div>
                                </a>
                                <div id="collapsethree" class="collapse show" aria-labelledby="headingthree">
                                    <div class="card-body p-0">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio7" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio7">Web Designer</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio8" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio8">Graphic Designer</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio9" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio9">PHP Developer</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio10" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio10">UI/UX Designer</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio11" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio11">Banking</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio12" name="customRadio1" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio12">Accountancy</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card mt-4">
                                <a data-toggle="collapse" href="#collapsefour" class="job-list" aria-expanded="true" aria-controls="collapsefour">
                                    <div class="card-header" id="headingfour">
                                        <h6 class="mb-0 text-dark f-18">Gender</h6>
                                    </div>
                                </a>
                                <div id="collapsefour" class="collapse show" aria-labelledby="headingfour">
                                    <div class="card-body p-0">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio13" name="customRadio3" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio13">Male</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio14" name="customRadio3" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio14">Female</label>
                                        </div>

                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio15" name="customRadio3" class="custom-control-input">
                                            <label class="custom-control-label ml-1 text-muted f-15" for="customRadio15">Others</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- collapse one end -->
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Kyle Jones</a></h5>
                                        <p class="text-muted f-14 mb-0">Web Delveloper, Graphic Disegner</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>419 Lakeland Terrace Detroit, MI 48226</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.9</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Susan Roth</a></h5>
                                        <p class="text-muted f-14 mb-0">PHP Delveloper, Web Disegner</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2984 Woodhill Avenue Easton, MD 21601</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.5</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Ricky Cash</a></h5>
                                        <p class="text-muted f-14 mb-0">UI/UX Designer, Software Developer</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2683 Farland Street Chicago, IL 60631</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-outline f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.0</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Kelly Perez</a></h5>
                                        <p class="text-muted f-14 mb-0">Software Developer, Graphic Disegner</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2120 County Line Road St George, FL 34683</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.5</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Dale Gambill</a></h5>
                                        <p class="text-muted f-14 mb-0">Graphic Disegner, Web Designer</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>3633 Cessna Drive Fort Wayne, IN 46802</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.7</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Rita Guidry</a></h5>
                                        <p class="text-muted f-14 mb-0">PHP Delveloper, Web Disegner</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2797 Bartlett Avenue Southfield, MI 48075</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.8</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Matt Morgan</a></h5>
                                        <p class="text-muted f-14 mb-0">Web Delveloper, PHP Delveloper</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2639 Warner Street Casper, WY 82601</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">5.0</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Hattie Blaser</a></h5>
                                        <p class="text-muted f-14 mb-0">Graphic Disegner, Web Designer</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>4883 Patterson Road Brooklyn, NY 11230</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-half f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.5</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <div class="list-grid-item mt-4">
                                <div class="grid-item-content p-2">
                                    <div class="employers-list-img mt-3">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar9.png" alt="" class="img-fluid mx-auto d-block rounded-circle">
                                    </div>
                                    <div class="grid-list-desc text-center mt-4">
                                        <h5 class="mb-1"><a href="#" class="text-dark">Robert Cole</a></h5>
                                        <p class="text-muted f-14 mb-0">Web Delveloper, Graphic Disegner</p>
                                        <p class="text-muted f-14 mb-0"><i class="mdi mdi-map-marker mr-2"></i>2424 Lowland Drive Chicago, IL 60606</p>
                                        <ul class="employers-icons list-inline mb-1">
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star f-19"></i></a></li>
                                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star-outline f-19"></i></a></li>
                                        </ul>
                                        <span class="badge badge-warning text-white">4.2</span>
                                    </div>
                                </div>
                                <hr class="mt-0 mb-0">
                                <div class="apply-button text-center mt-2 mb-2">
                                    <a href="#" class="btn btn-custom btn-sm">View Profile</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination job-pagination justify-content-center mt-5 mb-5">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                    <i class="mdi mdi-chevron-double-left f-15"></i>
                                </a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">
                                    <i class="mdi mdi-chevron-double-right f-15"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    background:#F8F8FF;
    margin-top:20px;
}
/********************
    EMPLOYERS LIST
*********************/
.employers-list-bg {
  padding: 180px 0px 80px 0px;
  background-image: url("../images/employers-list-bg.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.employers-list-img img {
  max-width: 80px;
  -webkit-box-shadow: 0 0 5px 0px #d7d7d7;
          box-shadow: 0 0 5px 0px #d7d7d7;
}

.employers-icons li {
  margin: 0px !important;
}

/********************
   EMPLOYERS DETAILS
*********************/
.employers-details-bg {
  padding: 180px 0px 80px 0px;
  background-image: url("../images/employers-details-bg.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.employers-details {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.employers-share-job li a {
  height: 40px;
  width: 40px;
  color: #777777;
  text-align: center;
  font-size: 19px;
  display: inline-block;
  line-height: 38px;
  border-radius: 4px;
  border: 1px solid #dddddd;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin: 6px 0;
  transition: all 0.5s;
}

.employers-share-job li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-color: #ff4f6c;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 3px 20px -8px #000000;
          box-shadow: 0 3px 20px -8px #000000;
}

@media (min-width: 200px) and (max-width: 768px) {
  .m-14 {
    margin: 14px 0px;
  }
}

@media (max-width: 425px) {
  .employers-details-time h6 {
    text-align: center !important;
  }
  .employers-details-item-border {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
  }
}

.list-grid-item {
  border: 1px solid #ececec;
  border-radius: 6px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.list-grid-item:hover {
  -webkit-box-shadow: 0 0 20px 0px rgba(47, 47, 47, 0.09);
          box-shadow: 0 0 20px 0px rgba(47, 47, 47, 0.09);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-color: transparent;
}

.left-sidebar .card-body {
    border-bottom: 1px solid #ececec;
}

.custom-control {
    margin: 11px 20px;
}

.card-header {
    background-color: transparent;
    margin-bottom: 0 !important;
}

.pagination.job-pagination .page-link {
  border-radius: 50% !important;
  margin: 0 4px;
  height: 46px;
  width: 45px;
  line-height: 29px;
  text-align: center;
  color: #777777;
}

.page-item.active .page-link {
  background-color: #ff4f6c;
  border-color: #ff4f6c;
  color: #ffffff !important;
}

.f-14 {
    font-size: 14px;
}
                                    
Bootstrap snippet bs4 edit profile page

bs4 edit profile page

View

Bootstrap snippet bs4 cv profile

bs4 cv profile

View

Bootstrap snippet shop user profile with ticket

shop user profile with ticket

View

Bootstrap snippet Social Profile widget with photos

Social Profile widget with photos

View

Bootstrap snippets. bs4 employers list

About this bootstrap snippet

This bootstrap snippet, bs4 employers list, was published on Feb 13th, 10:13 by Dey Dey and it is free.

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 snippet currectly have 1.8K views, Using this bootstrap snippet you have the following benefits:

Bootstrap 4.4.1

This snippet is based on bootstrap 4.4.1 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

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

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