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 4.4.1 included, to get the result that you can see in the preview selection
Download<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>[email protected]</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 and paste the following css code inside a page with bootstrap 4.4.1 included, to get the result that you can see in the preview selection
Downloadbody{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-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;
}
About this bootstrap example/template
This example/template, bs4 light resume page, was published on Feb 13th 2020, 10:45 by Bootdey Admin 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 code example currectly have 7.5K views, Using this bootstrap snippet you have the following benefits:
Bootstrap 4.4.1
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
This code example 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
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