Bootstrap snippet. bs4 light resume page

This snippet was created to help web designers, front-end 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: resume,profile,bs4

wave

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js" integrity="sha256-Zr3vByTlMGQhvMfgkQ5BtWRSKBGa2QlspKYJnkjZTmo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css" integrity="sha256-mLBIhmBvigTFWPSCtvdu6a76T+3Xyt+K571hupeFLg4=" crossorigin="anonymous" />

<section class="candidates-profile-bg">
        <div class="bg-overlay"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="candidates-profile-details text-center">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-fluid d-block mx-auto rounded-circle img-thumbnail mb-4">
                        <h4 class="text-white candidates-profile-name mb-2">Michael Brown</h4>
                        <p class="text-white-50 mb-2"><i class="mdi mdi-bank mr-2"></i>Web Themes.pvt.Ltd</p>
                        <ul class="candidates-profile-icons list-inline mb-3">
                            <li class="list-inline-item text-white-50 pr-2 f-16">PHP Developer</li>
                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                            <li class="list-inline-item"><a href="#" class="text-warning"><i class="mdi mdi-star"></i></a></li>
                        </ul>

                        <ul class="candidates-profile-social-icons list-inline mb-0">
                            <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-facebook"></i></a></li>
                            <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-twitter"></i></a></li>
                            <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-instagram"></i></a></li>
                            <li class="list-inline-item"><a href="#" class=""><i class="mdi mdi-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</section>

<section class="section"> 
    <div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark">About Us</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="job-detail mt-2 p-4">
                <div class="job-detail-desc">
                    <p class="text-muted f-14 mb-3">Aliquam erat volutpat Etiam vitae tortor Morbi vestibulum volutpat enim Aliquam nunc Nunc sed turpis sed mollis eros et ultrices tempus mauris ipsum aliquam libero non adipiscing dolor urna a orci Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos hymenaeos pellentesque dapibus hendrerit tortor Praesent egestas tristique nibh sed a libero cras us varius donec vitae orci sed dolor rutrum auctor fusce egestas elit eget lorem.</p>

                    <p class="text-muted f-14 mb-0">Libero venenatis faucibus ullam quis ante tiam sit amet orci eget eros faucibus tincidunt ed fringilla mauris sit amet nibh Donec sodales sagittis magna ed consequat leo eget bibendum sodales augue velit cursus nunc quis gravida magna mi libero usce vulputate eleifend sapien estibulum purus qua scelerisque ut mollis sed nonummy id metus ullam accumsan lorem Vivamus elementum semper enean vulputate eleifend tellus enean leo ligula porttitor.</p>
                </div>
                <hr>
                <ul class="list-inline mt-3 mb-0">
                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-map-marker mr-2"></i>3659 Turkey Pen Road Manhattan, NY 10016</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-web mr-2"></i>Www.webthemes.co.in</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-email mr-2"></i>Webthemes.ltd@gmail.com</a>
                    </li>

                    <li class="list-inline-item mr-3">
                        <a href="" class="text-muted f-15 mb-0"><i class="mdi mdi-cellphone-iphone mr-2"></i>123 456 7890</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mt-4">Overview</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="job-detail mt-2 p-4">
                <div class="job-detail-desc">
                    <p class="text-muted f-14 mb-3">Cras dapibus Vivamus elementum semper nisi Aenean vulputate eleifend tellus Aenean leo ligula porttitor eu consequat vitae eleifend ac enim aliquam lorem ante dapibus in viverra quis feugiat a tellus phasellus viverra nulla ut metus variuse laoreet quisque rutrum aenean imperdiet etiam ultricies nisi that is maecenas tempus tini tellus eget condimentum rhoncus sem semper libero sit amet adipiscing sem neque sed ipsum nam quam nunc blandit vel luctus pulvinar hendrerit lorem maecenas nec odio et ante tincidunt tempus donec vitae libero venenatis faucibus nullam quis ante etiam sit amet orci eget eros faucibus tincidunt Duis leo Sed fringilla a mauris sit amet nibh donec sodales sagittis magna vel augue curabitur ullamcorper ultricies nisi nam eget dui etiame rhoncus ut enim as minima veniam quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid commodi.</p>

                    <p class="text-muted f-14 mb-0">Sed consequat eget bibendum augue cursus nunc quis gravida magna mi a Itaque earum rerum hic tenetur a sapiente delectus ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat liber fusce vulputate eleifend sapien vestibulum purus quam scelerisque ut mollis sed nonummy id metus nullam accumsan lorem in dui cras ultricies mi eu turpis hendrerit fringilla vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia in dui quis consectetuer lacinia nam pretium turpis arcu duis arcu tortor.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mt-4 mb-4">Education</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-school"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2016 - April 2017</p>
                <p class="f-14 mb-0">Diploma In Management Studies</p>
                <hr class="mt-2 mb-2">
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-library"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2017 - April 2018</p>
                <p class="f-14 mb-0">Diploma In Management</p>
                <hr class="mt-2 mb-2">
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="job-detail candidates-profile-education text-center text-muted mb-5 mt-5">
                <div class="profile-education-icon">
                    <i class="mdi mdi-briefcase-check"></i>
                </div>
                <h6 class="text-uppercase f-17"><a href="#" class="text-muted">University Of USA</a></h6>
                <p class="f-14 mb-1">May 2018 - April 2019</p>
                <p class="f-14 mb-0">Management Of Company</p>
                <hr class="mt-2 mb-2">
                <p class="f-14 mb-0">Suspendisse faucibus et pellentesque egestas lacus ante convallis.</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <h3 class="text-dark mb-4">Experience</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-2.png" alt="" class="img-fluid mx-auto d-block">
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#" class="text-dark">Web Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $950</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.webthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>1919 Ward Road West Nyack, NY 10994</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-3.png" alt="" class="img-fluid mx-auto d-block">
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#" class="text-dark">Web code Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">Web Developer</p>
                            <p class="text-muted mb-0 f-16">Fab 2015 - July 2018</p>
                            <p class="text-muted mb-0 f-16">Salary : $1100</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.webcodeltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-5.png" alt="" class="img-fluid mx-auto d-block">
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#" class="text-dark">Brand Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $1000</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.brandthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="job-detail job-list-box mt-4 p-4">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="company-brand-logo text-center mb-4">
                            <img src="images/featured-job/img-7.png" alt="" class="img-fluid mx-auto d-block">
                        </div>
                    </div>

                    <div class="col-lg-9">
                        <div class="job-list-desc candidates-profile-exp-desc">
                            <h5 class="f-19 mb-2"><a href="#" class="text-dark">Small Themes Pvt.Ltd</a></h5>
                            <p class="text-muted mb-0 f-16">PHP Developer</p>
                            <p class="text-muted mb-0 f-16">Jan 2016 - Dec 2017</p>
                            <p class="text-muted mb-0 f-16">Salary : $900</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-bank mr-2"></i>www.smallthemesltd.co.in</p>
                            <p class="text-muted mb-0 f-16"><i class="mdi mdi-map-marker mr-2"></i>519 Leo Street Butler, PA 16001</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

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{margin-top:20px;}
.candidates-profile-bg {
  padding: 180px 0px 80px 0px;
  background-image: url("https://www.bootdey.com/img/Content/bg1.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.candidates-profile-details img {
  max-width: 130px;
  background: transparent;
}

.candidates-profile-details .candidates-profile-name {
  font-weight: 300;
}

.candidates-profile-icons .list-inline-item {
  margin: 0 1px !important;
}

.candidates-profile-social-icons li a {
  height: 32px;
  width: 32px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.candidates-profile-social-icons li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border-color: #ff4f6c;
}

.profile-education-icon {
  border: 1px solid #ececec;
  position: absolute;
  width: 90px;
  height: 90px;
  line-height: 90px;
  font-size: 42px;
  border-radius: 50px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #ffffff;
  color: #ff4f6c;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.candidates-profile-education {
  padding: 64px 24px 24px;
}

.candidates-profile-education:hover .profile-education-icon {
  background-color: #ff4f6c;
  border: 1px solid #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-details {
  padding: 210px 0px 60px 0px;
  background-image: url("../images/job-details-bg.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
}

.job-detail {
  border: 1px solid #ececec;
  border-radius: 6px;
}

.job-details-desc-item p {
  overflow: hidden;
}

.job-detail-icons li {
  margin: 2px !important;
}

.job-detail-icons li a {
  height: 32px;
  width: 32px;
  color: #ff4f6c;
  text-align: center;
  font-size: 15px;
  display: inline-block;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid #ff4f6c;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-detail-icons li a:hover {
  background-color: #ff4f6c;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.job-detail-time li {
  padding: 10px 4px;
  border-top: 1px solid #ececec;
}

.job-detail-time li:first-child {
  border-top: none;
}
.section {
    padding-bottom: 80px;
    padding-top: 80px;
    position: relative;
}

Similar snippets

Bootstrap bs4 Creative Princing Table example

bs4 Creative Princing Table

Bootstrap Profile with tabs like facebook page example

Profile with tabs like facebook page

Bootstrap bs4 member details example

bs4 member details

Bootstrap Social network post image example

Social network post image

Bootstrap profile with contact information example

profile with contact information

Bootstrap notes dashboard example

notes dashboard

Bootstrap Dashboard Statistics Overview example

Dashboard Statistics Overview

Bootstrap Note cards example

Note cards

Comments

Bootstrap snippets. bs4 light resume page

About this bootstrap snippet

This bootstrap snippet, bs4 light resume page, was published on Feb 13th, 10:45 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.9K 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