5+ Bootstrap Resume Templates

This post contains a total of 5+ Bootstrap Resume Template Examples with Source Code. All these Resume Templates are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Resume Templates

1. By Fab Rod

Made by Fab Rod. A simple Resume Template. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
      <!-- Bootstrap -->
  <link href="css/bootstrap-4.3.1.css" rel="stylesheet">
</head>
  <body>
    <div class="container">
      <hr>
      <div class="row">
        <div class="col-6">
          <h1>Fab Rod</h1>
        </div>
        
      </div>
      <hr>
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <div class="media">
            <img class="mr-3" src="https://i.imgur.com/4LALsYi.png" alt="Generic placeholder image">
            <div class="media-body">
              <h5 class="mt-0">Web Developer</h5>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-12">
          <div class="row justify-content-md-around m-1">
            <address>
              <strong>Fab Rod</strong><br>
              1355 Market St, Suite 900<br>
              San Francisco, CA 94103<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890<br>
              <a href="#">Email</span></a>
            </address>
          </div>
        </div>
      </div>
      <hr>
     
      
      <h2>Work Experience</h2>
      <hr>
      <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="row">
            <div class="col-5">
              <h4>ABC Corp.</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Web Developer</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet, consectetur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
          </ul>
        </div>
        <div class="col-md-6 col-sm-12">
          <div class="row">
            <div class="col-5">
              <h4>XYZ Corp.</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Senior Web Developer</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet, consectetur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
          </ul>
        </div>
      </div>
      <hr>
      <h2>Portfolio</h2>
      <hr>
      <div class="container">
        <div class="row text-center">
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
        </div>
        <div class="row text-center">
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
          <div class="col-sm-4 col-12 p-0"><img class="img-thumbnail"  src="images/300X200.gif" alt=""></div>
        </div>
      </div>
      <hr>
		 <div class="row">
        <div class="col-md-6 col-sm-12">
          <h2>Education</h2>
          <hr>
          <div class="row">
            <div class="col-6">
              <h4>College of Web Design</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2002 - Dec 2006</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Bachelors</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
          <div class="row">
            <div class="col-6">
              <h4>University of Web Design</h4>
            </div>
            <div class="col-6">
              <h5 class="text-right"><span aria-hidden="true"></span> Jan 2007 - Dec 2008</h5>
            </div>
          </div>
          <h5><span class="badge badge-secondary">Masters</span></h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae, corporis, tempore nam fugit deleniti sequi excepturi quod repellat laboriosam soluta laudantium amet dicta non ratione distinctio nihil dignissimos esse!</p>
        </div>
        <div class="col-md-6 col-sm-12">
          <h2>Skill Set</h2>
          <hr>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> HTML</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> CSS</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> JAVASCRIPT</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 95%"> NODE</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> EXPRESS</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 95%"> REACT</div>
          </div>
          <div class="progress mt-4">
            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> MONGODB</div>
          </div>
        </div>
      </div>
      
      <footer class="text-center">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>Copyright Β© MyWebsite. All rights reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.3.1.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js'></script>
</body>
</html>

2. By khawar

Made by khawar. CV with sidebar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: 'Roboto', sans-serif;
  color: #545E6C;
  background: #f5f5f5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

a {
  color: #2d7788;
}

a:hover {
  text-decoration: underline;
  color: #1a454f;
  
}

a:focus {
  text-decoration: none;
}

p {
  line-height: 1.5;
}

.wrapper {
  background: #42A8C0;
  max-width: 960px;
  margin: 0 auto;
  margin-top: 30px;
  position: relative;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-wrapper {
  background: #42A8C0;
  position: absolute;
  right: 0;
  width: 240px;
  height: 100%;
  min-height: 800px;
  color: #fff;
}

.sidebar-wrapper a {
  color: #fff;
}

.sidebar-wrapper .profile-container {
  padding: 30px;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
}

.sidebar-wrapper .name {
  font-size: 32px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 10px;
}

.sidebar-wrapper .tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar-wrapper .profile {
  margin-bottom: 15px;
}

.sidebar-wrapper .contact-list .svg-inline--fa {
  margin-right: 5px;
  font-size: 18px;
  vertical-align: middle;
}

.sidebar-wrapper .contact-list li {
  margin-bottom: 15px;
}

.sidebar-wrapper .contact-list li:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .contact-list .email .svg-inline--fa {
  font-size: 14px;
}

.sidebar-wrapper .container-block {
  padding: 30px;
}

.sidebar-wrapper .container-block-title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
}

.sidebar-wrapper .degree {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 5px;
}

.sidebar-wrapper .education-container .item {
  margin-bottom: 15px;
}

.sidebar-wrapper .education-container .item:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .education-container .meta {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-bottom: 0px;
  margin-top: 0;
  font-size: 14px;
}

.sidebar-wrapper .education-container .time {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-bottom: 0px;
}

.sidebar-wrapper .languages-container .lang-desc {
  color: rgba(255, 255, 255, 0.6);
}

.sidebar-wrapper .languages-list {
  margin-bottom: 0;
}

.sidebar-wrapper .languages-list li {
  margin-bottom: 10px;
}

.sidebar-wrapper .languages-list li:last-child {
  margin-bottom: 0;
}

.sidebar-wrapper .interests-list {
  margin-bottom: 0;
}

.sidebar-wrapper .interests-list li {
  margin-bottom: 10px;
}

.sidebar-wrapper .interests-list li:last-child {
  margin-bottom: 0;
}

.main-wrapper {
  background: #fff;
  padding: 60px;
  padding-right: 300px;
}

.main-wrapper .section-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  color: #2d7788;
  position: relative;
  margin-top: 0;
  margin-bottom: 20px;
}

.main-wrapper .section-title .icon-holder {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  display: inline-block;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #2d7788;
  text-align: center;
  font-size: 16px;
  position: relative;
  top: -8px;
}

.main-wrapper .section-title .icon-holder .svg-inline--fa {
  font-size: 14px;
  margin-top: 6px;
}

.main-wrapper .section {
  margin-bottom: 60px;
}

.main-wrapper .experiences-section .item {
  margin-bottom: 30px;
}

.main-wrapper .upper-row {
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
}

.main-wrapper .job-title {
  color: #3F4650;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.main-wrapper .time {
  position: absolute;
  right: 0;
  top: 0;
  color: #97AAC3;
}

.main-wrapper .company {
  margin-bottom: 10px;
  color: #97AAC3;
}

.main-wrapper .project-title {
  font-size: 16px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 5px;
}

.main-wrapper .projects-section .intro {
  margin-bottom: 30px;
}

.main-wrapper .projects-section .item {
  margin-bottom: 15px;
}

.skillset .item {
  margin-bottom: 15px;
  overflow: hidden;
}

.skillset .level-title {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 12px;
}

.skillset .level-bar {
  height: 12px;
  background: #f5f5f5;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.skillset .theme-progress-bar {
  background: #68bacd;
}

.footer {
  padding: 30px;
  padding-top: 60px;
}

.footer .copyright {
  line-height: 1.6;
  color: #545E6C;
  font-size: 13px;
}

.footer .fa-heart {
  color: #fb866a;
}

@media (max-width: 767.98px) {
  .sidebar-wrapper {
    position: static;
    width: inherit;
  }
  .main-wrapper {
    padding: 30px;
  }
  .main-wrapper .time {
    position: static;
    display: block;
    margin-top: 5px;
  }
  .main-wrapper .upper-row {
    margin-bottom: 0;
  }
}

@media (min-width: 992px) {
  .skillset .level-title {
    display: inline-block;
    float: left;
    width: 30%;
    margin-bottom: 0;
  }
}
</style>
</head> 
<body>
    <div class="wrapper">
        <div class="sidebar-wrapper">
            <div class="profile-container">
                <img class="profile" src="assets/images/IMG20200222134645.jpg"  with="200px" height="200px"alt="" />
                <h1 class="name">Khawar Jahangiri</h1>
                <h3 class="tagline">Full Stack Developer</h3>
            </div><!--//profile-container-->
            
            <div class="contact-container container-block">
                <ul class="list-unstyled contact-list">
                    <li class="email"><i class="fas fa-envelope"></i><a href="#">Email</a></li>
                    <li class="phone"><i class="fas fa-phone"></i><a href="tel:0123 456 789">0-98765432</a></li>
                    <li class="website"><i class="fas fa-globe"></i><a href="#" target="_blank">portfoliosite.com</a></li>
                    <li class="linkedin"><i class="fab fa-linkedin-in"></i><a href="#" target="_blank">linkedin.com/in/alandoe</a></li>
                    <li class="github"><i class="fab fa-github"></i><a href="#" target="_blank">github.com/username</a></li>
                    <li class="twitter"><i class="fab fa-twitter"></i><a href="https://twitter.com/3rdwave_themes" target="_blank">@twittername</a></li>
                </ul>
            </div><!--//contact-container-->
            <div class="education-container container-block">
                <h2 class="container-block-title">Education</h2>
                <div class="item">
                    <h4 class="degree">Bachlor in  Computer Science</h4>
                    <h5 class="meta">Iqra University</h5>
	                    <div class="time">2016 - present</div>
                </div><!--//item-->
                <div class="item">
                    <h4 class="degree">Intermediate</h4>
                    <h5 class="meta">D.H.A.S.K.B.Z College</h5>
                    <div class="time">2015 - 2016</div>
                </div><!--//item-->
            </div><!--//education-container-->
            
            <div class="languages-container container-block">
                <h2 class="container-block-title">Languages</h2>
                <ul class="list-unstyled interests-list">
                    <li>HINDKO <span class="lang-desc">(Native)</span></li>
                    <li> urdu <span class="lang-desc">(Professional)</span></li>
                    <li> Pashto <span class="lang-desc">(Professional)</span></li>
                </ul>
            </div><!--//interests-->
            
            <div class="interests-container container-block">
                <h2 class="container-block-title">Interests</h2>
                <ul class="list-unstyled interests-list">
                    <li>Climbing</li>
                    <li>Snowboarding</li>
                    <li>Cooking</li>
                </ul>
            </div><!--//interests-->
            
        </div><!--//sidebar-wrapper-->
        
        <div class="main-wrapper">
            
            <section class="section summary-section">
                <h2 class="section-title"><span class="icon-holder"><i class="fas fa-user"></i></span>Career Profile</h2>
                <div class="summary">
                    <p>Summarise your career here lorem ipsum dolor sit amet, consectetuer adipiscing elit. You can </a>. 
                        Aenean commodo ligula eget dolor aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
                        nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
                </div><!--//summary-->
            </section><!--//section-->
            
            <section class="section experiences-section">
                <h2 class="section-title"><span class="icon-holder"><i class="fas fa-briefcase"></i></span>Experiences</h2>
                
                <div class="item">
                    <div class="meta">
                        <div class="upper-row">
                            <h3 class="job-title">Lead Developer</h3>
                            <div class="time">2019 - Present</div>
                        </div><!--//upper-row-->
                        <div class="company">Startup Hubs, San Francisco</div>
                    </div><!--//meta-->
                    <div class="details">
                        <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                             Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                              Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                               Donec pede justo.</p>  
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                            dicta sunt explicabo. </p>
                    </div><!--//details-->
                </div><!--//item-->
                
                <div class="item">
                    <div class="meta">
                        <div class="upper-row">
                            <h3 class="job-title">Senior Software Engineer</h3>
                            <div class="time">2018 - 2019</div>
                        </div><!--//upper-row-->
                        <div class="company">Google, London</div>
                    </div><!--//meta-->
                    <div class="details">
                        <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                             Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes
                             , nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>  
                        
                    </div><!--//details-->
                </div><!--//item-->
                
                <div class="item">
                    <div class="meta">
                        <div class="upper-row">
                            <h3 class="job-title">UI Developer</h3>
                            <div class="time">2016 - 2018</div>
                        </div><!--//upper-row-->
                        <div class="company">Amazon, London</div>
                    </div><!--//meta-->
                    <div class="details">
                        <p>Describe your role here lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                             Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
                              nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>  
                    </div><!--//details-->
                </div><!--//item-->
                
            </section><!--//section-->
            
            <section class="section projects-section">
                <h2 class="section-title"><span class="icon-holder"><i class="fas fa-archive"></i></span>Projects</h2>
                <div class="intro">
                    <p>You can list your side projects or open source libraries in this section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula in nunc bibendum fringilla a eu lectus.</p>
                </div><!--//intro-->
                <div class="item">
                    <span class="project-title"><a href="#" 
                        target="_blank"> CoderPro</a></span> -
                     <span class="project-tagline">A responsive website template designed to help developers launch their software projects. </span>
                    
                </div><!--//item-->
                <div class="item">
                    <span class="project-title"><a href="#" 
                        target="_blank">Launch</a></span> - <span class="project-tagline">A responsive website template designed to help startups promote their products or services.</span>
                </div><!--//item-->
                <div class="item">
                    <span class="project-title"><a href="#" target="_blank">DevCard</a></span> - <span class="project-tagline">A portfolio website template designed for software developers.</span>
                </div><!--//item-->
                <div class="item">
                    <span class="project-title"><a href="https://themes.3rdwavemedia.com/bootstrap-templates/startup/bootstrap-template-for-mobile-apps-nova-pro/" target="_blank">Nova Pro</a></span> - <span class="project-tagline">A responsive Bootstrap theme designed to help app developers promote their mobile apps</span>
                </div><!--//item-->
                <div class="item">
                    <span class="project-title"><a href="http://themes.3rdwavemedia.com/website-templates/responsive-bootstrap-theme-web-development-agencies-devstudio/" target="_blank">DevStudio</a></span> - 
                    <span class="project-tagline">A responsive website template designed to help web developers/designers market their services. </span>
                </div><!--//item-->
            </section><!--//section-->
            
            <section class="skills-section section">
                <h2 class="section-title"><span class="icon-holder"><i class="fas fa-rocket"></i></span>Skills &amp; Proficiency</h2>
                <div class="skillset">        
                    <div class="item">
                        <h3 class="level-title">Python &amp; Django</h3>
                        <div class="progress level-bar">
                            <div class="progress-bar theme-progress-bar" role="progressbar" 
                            style="width: 99%" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                               
                    </div><!--//item-->
                    
                    <div class="item">
                        <h3 class="level-title">Javascript &amp; jQuery</h3>
                        <div class="progress level-bar">
                            <div class="progress-bar theme-progress-bar" role="progressbar" 
                            style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                              
                    </div><!--//item-->
                    
                    <div class="item">
                        <h3 class="level-title">Angular</h3>
                        <div class="progress level-bar">
                            <div class="progress-bar theme-progress-bar" role="progressbar" 
                            style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                                 
                    </div><!--//item-->
                    
                    <div class="item">
                        <h3 class="level-title">HTML5 &amp; CSS</h3>
                        <div class="progress level-bar">
                                <div class="progress-bar theme-progress-bar" role="progressbar" 
                                style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                                
                    </div><!--//item-->
                    
                    <div class="item">
                        <h3 class="level-title">Ruby on Rails</h3>
                        <div class="progress level-bar">
                            <div class="progress-bar theme-progress-bar" role="progressbar" 
                            style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                                  
                    </div><!--//item-->
                    
                    <div class="item">
                        <h3 class="level-title">Sketch &amp; Photoshop</h3>
                        <div class="progress level-bar">
						    <div class="progress-bar theme-progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
						</div>                                 
                    </div><!--//item-->
                    
                </div>  
            </section><!--//skills-section-->
            
        </div><!--//main-body-->
    </div>
 
    <footer class="footer">
        <div class="text-center">
            
            <small class="copyright">Designed with <i class="fas fa-heart"></i> by
                 <a href="#" target="_blank">EXPERTIZO</a> developers</small>
        </div><!--//container-->
    </footer><!--//footer-->
    
    <!-- *****CONFIGURE STYLE (DEMO ONLY)****** -->  
    <div id="config-panel" class="config-panel d-none d-lg-block">
        <div class="panel-inner">
            <a id="config-trigger" class="config-trigger config-panel-hide text-center" href="#"><i class="fas fa-cog fa-spin mx-auto" data-fa-transform="down-6" ></i></a>
            <h5 class="panel-title">Choose Colour</h5>
            <ul id="color-options" class="list-inline mb-0">
                <li class="theme-1 active list-inline-item"><a data-style="assets/css/orbit-1.css" href="#"></a></li>
            </ul>
            <a id="config-close" class="close" href="#"><i class="fas fa-times-circle"></i></a>
        </div><!--//panel-inner-->
    </div><!--//configure-panel-->
    
    <!-- DEMO ONLY --><script type="text/javascript" src="demo/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="demo/demo.js"></script>       
</body>
</html>

3. By SuperPepe

Made by SuperPepe. Simple Bootstrap Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
  font-family: "Open Sans", Arial, Tahoma;
  color: #363636;
  background: #ededed;
}

.primary, strong, h2 {
  color: #3b5a76;
}

.container-main {
  background: #fff;
  margin-top: 80px;
  padding: 0 30px 30px 30px;
}

header {
  min-height: 100px;
  overflow: auto;
}

header {
  margin: 0;
  padding: 20px 0 0 0;
  font-size: 2.2em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-align: center;
  line-height: 1.4em;
  padding-bottom: 20px;
  border-bottom: 1px solid lightgrey;
}

.row {
  margin: 20px 0 20px 0;
}

.contact-list {
  list-style: none;
}
.contact-list li {
  margin-bottom: 8px;
}
.contact-list li img {
  margin-right: 6px;
}

.header-image {
  width: 120px;
  margin: 0 auto;
  display: block;
  margin-top: -80px;
}

#recent-projects li {
  list-style: none;
  margin-bottom: 10px;
  float: left;
}

footer {
  padding: 10px;
}
</style>
</head>
<body>
  <section>
    <div class="container container-main">
    <img class="header-image" src="https://image.ibb.co/nntTNk/person.png" alt="" />
    <header>Hello, <br /> my name is <strong>John Doe</strong> and I do stuff</header>
    <div class="row">
    <div class="col-md-7">
      <h2># About</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus perferendis et animi.</p>
      </div>
    <div class="col-md-5">
      <h2># Contact Info</h2>
      <ul class="contact-list">
        <li><img src="https://image.ibb.co/igqa2k/phone.png" alt="" />(847) 555-777-555</li>
        <li><img src="https://image.ibb.co/n5dHF5/email.png" alt="" /><a href="#">Email</a></li>
        <li><img src="https://image.ibb.co/i6Djv5/facebook.png" alt="" />facebook.com/johndoe</li>
        <li><img src="https://image.ibb.co/n4xcF5/twitter.png" alt="" />twitter.com/johndoe</li>
      </ul>
      </div>
    </div>
      <div class="row">
      <div class="col-md-7">
        <h2># Education & Experience</h2>
        <div class="media">
            <div class="media-left">
              1996-1999
            </div>
            <div class="media-body">
              <h4 class="media-heading">Some school</h4>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </div>
          </div>
          <div class="media">
            <div class="media-left">
              2000-2002
            </div>
            <div class="media-body">
              <h4 class="media-heading">Some more school</h4>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </div>
          <div class="media">
            <div class="media-left">
              2003-2005
            </div>
            <div class="media-body">
              <h4 class="media-heading">Some experience</h4>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </div>
          </div>
          <div class="media">
            <div class="media-left">
              2005-2008
            </div>
            <div class="media-body">
              <h4 class="media-heading">Some more experience</h4>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            </div>
          </div>
        </div>
      </div> <!-- end left side -->
     <div class="col-md-5">
       <h2>Skills</h2>
         <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
           Javascript
          </div>
        </div>
         <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
           Ruby on Rails
          </div>
        </div>
         <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
           Php
          </div>
        </div>
          <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
           Python
          </div>
        </div>
          <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
           C#
          </div>
        </div>
    </div> <!-- end right side -->
  </div> <!-- end row -->
      <div class="row">
      <div class="col-md-7">
          <h2># Services</h2>
          <div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-check"></span>HTML/CSS Website Design</div>
          <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-check"></span>Programming(PHP, Rails, Python)</div>
          <div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-check"></span>Server & Database Administrator</div>
          <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-check"></span>CMS Web Development (Joomly, WordPress & Drupal)</div>
         <div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-check"></span>PSD to HTML or CMS</div>
          <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-check"></span>Programming(PHP, Rails, Python)</div>
        </div>
      <div id="recent-projects" class="col-md-5">
        <h2># Recent Projects</h2>
        <ul>
          <li><img src="https://image.ibb.co/k1FWa5/work1.png" alt="" /></li>
          <li><img src="https://image.ibb.co/nhLKTQ/work2.png" alt="" /></li>
          <li><img src="https://image.ibb.co/hqu2hk/work3.png" alt="" /></li>
          <li><img src="https://image.ibb.co/dFPeTQ/work4.png" alt="" /></li>
        </ul>
        </div>
      </div> <!-- end row -->
    </div>
    <footer>
      <div class="container-fluid text-center">
      <p>&copy Copyright 2017 etc etc</p>
      </div>
    </footer>
 </section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

4. By Nathanael Mortensen

Made by Nathanael Mortensen. Bootstrap Resume with Multiple Sections. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
</head>
<body>
  <div class="bg-dark container-fluid">
      <div class="bg-dark jumbotron">
        <div class="text-white container">
          <h1>Nathanael Mortensen</h1>
          <h3>Software Engineer</h3>
          <div class="row">
            <div class="col-sm">
              <a class="text-white" href="natemortensen.com">natemortensen.com</a>
            </div>
            <div class="col-sm">
              <a class="text-white" href="#">Email</span></a>
            </div>
            <div class="col-sm">
              (970)402-8870
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-4 mb-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">
                Languages
              </h5>
              <ul class="list-group list-group-flush">
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Java</div>
                          <div class="col text-muted text-right">Expert</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 100%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Kotlin</div>
                          <div class="col text-muted text-right">Expert</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 100%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <di class="col">C#</di>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Javascript</div>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">C/C++</div>
                          <div class="col text-muted text-right">Moderate</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 70%"></div>
                        </div>
                      </div>

                   </ul>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">
                Databases
              </h5>
              <ul class="list-group list-group-flush">
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">MySQL</div>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">MongoDB</div>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Redis</div>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                    <div class="list-group-item">
                        <div class="row">
                          <div class="col">PostgreSQL</div>
                          <div class="col text-muted text-right">Moderate</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 70%"></div>
                        </div>
                      </div>
                    <div class="list-group-item">
                        <div class="row">
                          <div class="col">RethinkDB</div>
                          <div class="col text-muted text-right">Moderate</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 70%"></div>
                        </div>
                      </div>
                   </ul>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">
                Tools
              </h5>
              <ul class="list-group list-group-flush">
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Maven</div>
                          <div class="col text-muted text-right">Expert</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 100%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Gradle</div>
                          <div class="col text-muted text-right">Expert</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 100%"></div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row">
                          <div class="col">Git</div>
                          <div class="col text-muted text-right">Experienced</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 80%"></div>
                        </div>
                      </div>
                    <div class="list-group-item">
                        <div class="row">
                          <div class="col">Kubernetes</div>
                          <div class="col text-muted text-right">Moderate</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 70%"></div>
                        </div>
                      </div>
                    <div class="list-group-item">
                        <div class="row">
                          <div class="col">Docker</div>
                          <div class="col text-muted text-right">Moderate</div>
                        </div>
                        <div class="progress">
                          <!-- This style tag is the only way to set the progress bar-->
                          <div class="progress-bar" role="progressbar" style="width: 70%"></div>
                        </div>
                      </div>
                  </ul>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-7 mb-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title h5">
                Experience
              </div>
              <ul class="list-group list-group-flush">
                <div class="list-group-item">
                  <div class="row">
                    <div class="col">
                      <strong>Software Developer</strong>
                    </div>
                    <div class="col text-muted text-right">October 2016 - April 2017</div>
                  </div>
                  Mineplex LLC
                  <ul>
                    <li>
                      Maintained and improved legacy codebases.
                    </li>
                    <li>
                       Designed a new metrics system for analyzing player interactivity and retention using InfluxDB.
                    </li>
                    <li>
                      Designed and created a matchmaking service which was optimized for processing tens of thousands of players per second.
                    </li>
                  </ul>
                </div>
                
                <div class="list-group-item">
                  <div class="row">
                    <div class="col">
                      <strong>Software Developer</strong>
                    </div>
                    <div class="col text-muted text-right">December 2015 - August 2016</div>
                  </div>
                  LuckyPrison Minecraft Server
                  <ul>
                    <li>
                      Added features to existing codebase utilizing Java, MySQL, and redis.
                    </li>
                    <li>
                       Designed a distributed approach to
Minecraft servers utilizing Docker and Kubernetes for container orchestration.
                    </li>
                  </ul>
                </div>
                <div class="list-group-item">
                  <div class="row">
                    <div class="col">
                      <strong>Independent Contractor</strong>
                    </div>
                    <div class="col text-muted text-right">May - August 2015</div>
                  </div>
                  Battleline Games
                  <ul>
                    <li>
                      Structured frontend development stack and ported 2D games from Flash to Javascript and Typescript using
Pixi.js as a game engine.
                    </li>
                    
                  </ul>
                </div>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-5 mb-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">
                <div class="row">
                  <div class="col-6">
                  <h5>Open source</h5>
                  </div>
                  <a class="text-muted text-right col-5" href="https://github.com/natemort">Github:// natemort</a>
                </div>
              </div>
              <ul class="list-group list-group-flush">
                <a class="list-group-item list-group-item-action" href="https://bukkit.org">
                  <div class="row">
                    <div class="font-weight-bold col">Bukkit Project</div>
                    <div class="col text-muted text-right">2012-2014</div>
                  </div>
                  <ul>
                    <li>
                      Last release received 2.25 million downloads. Used by 82% of Minecraft servers. Estimated 10 million+
                      end users.
                    </li>
                    <li>
                      Volunteered as a project maintainer for 2 years, with an emphasis on integrating community pull
                      requests and updating for changes to the game while maintaining ABI compatibility.
                    </li>
                  </ul>
                </a>
                <a class="list-group-item list-group-item-action" href="https://github.com/natemort/PluginInject">
                  <div class="row">
                    <div class="font-weight-bold col">PluginInject</div>
                    <div class="col text-muted text-right">2017-</div>
                  </div>
                  <ul>
                    <li>
                      Created inversion of control and injection framework for consumption along Bukkit API.
                    </li>
                    <li>
                      Built around HK2, the reference implementation of JSR-330(Dependency Injection).
                    </li>
                  </ul>
                </a>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="col-12 mb-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">
                Education
              </h5>
              <ul class="list-group list-group-flush">
                <div class="list-group-item">
                  <div class="row">
                    <div class="font-weight-bold col">Colorado State University</div>
                    <div class="col text-muted text-right">August 2016- May 2019</div>
                  </div>
                  <ul>
                    <li>Bachelors in Computer Science with a minor in Mathematics.</li>
                    <li>3.7 GPA</li>
                  </ul>
                </div>
                <div class="list-group-item">
                  <div class="row">
                    <div class="font-weight-bold col">Fossil Ridge High School</div>
                    <div class="col text-muted text-right">2011- 2016</div>
                  </div>
                </div>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>
</body>
</html>
 

5. By Robyn Brown

Made by Robyn Brown. Minimalistic Resume Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
#about  {
  text-align: center;
  padding: 40px;
}

#about img {
  width: 200px;
  border-radius: 50%;
}

#about h1 {
  margin: 25px;
}

.card .card-header {
  cursor: pointer;
}
</style>
  </head>
  <body>

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Robyn Brown</a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <a class="nav-link" href="#">About Me</a>
          </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Experience</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Education</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        </ul>
      </div>
    </nav>

  <section class="container" id="about">
    <img src="https://secure.meetupstatic.com/photos/member/3/a/5/member_265920933.jpeg">
    <h1 class="display-4">Robyn Brown</h1>
    <p>Robyn is a teambuilder who empowers people to execute big ideas effectively with confidence and creativity.</p>
    <p>
      <strong>Skills:</strong>
      <span class="badge badge-pill badge-primary">Juggling</span>
      <span class="badge badge-pill badge-primary">Meetups</span>
      <span class="badge badge-pill badge-primary">Hiking</span>
      <span class="badge badge-pill badge-primary">Board Games</span>
      <span class="badge badge-pill badge-primary">Organizing</span>
      <span class="badge badge-pill badge-primary">Listening</span>
    </p>
  </section>

  <section class="container" id="experience">
    <div class="card">
      <div class="card-header" data-toggle="collapse" data-target="#exp1">
        <div class="row">
          <h5 class="col-md-8 mb-0">Community Organizer</h5>
          <em class="col-md-4 text-md-right">Apr 2017 - Current</em>
        </div>
      </div>
      <div class="card-block" id="exp1">
        <h5 class="col-md-8 mb-0">Tech Talent South - Dallas, TX</h5>
        <p>As Community Organizer, I am responsible for the student experience in the classroom and beyond. I also coordinate and organize pre-​course ​events​ and workshops​ and lead marketing efforts in Dallas.</p>
      </div>
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

6. By Neeraj Gupta

Made by Neeraj Gupta. Bootstrap Resume with Sidebar and Header Image. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>

<body class="bg-light">
  <div class="card bg-white border-0 mb-5 shadow-sm">
    <div class="card-body d-flex align-items-center justify-content-start p-5 flex-sm-column flex-column flex-md-row">
      <img src="https://i.ibb.co/px2XJnS/profile.png" class="rounded-circle bg-secondary mb-sm-4 mb-4 mb-md-0" alt="profile" width="200" />
      <div class="
            d-flex
            flex-column
            align-items-center
            align-items-sm-center
            align-items-md-start
            justify-content
            between
            ms-0
            ms-md-4
            mb-sm-5
            mb-5
            mb-md-0
          ">
        <h1 class="display-4 fw-bold mb-0">Name</h1>
        <p class="fs-3 fw-normal">Developer</p>
        <div class="d-flex align-items-center justify-content-between">
          <button class="btn btn-dark rounded-circle fs-4 p-0" style="height: 40px; width: 40px;">
            <i class="bi bi-github"></i>
          </button>
          <button class="btn btn-primary rounded-circle ms-2 fs-4 p-0" style="height: 40px; width: 40px;">
            <i class="bi bi-linkedin"></i>
          </button>
          <button class="btn btn-danger rounded-circle ms-2 fs-4 p-0" style="height: 40px; width: 40px;">
            <i class="bi bi-instagram"></i>
          </button>
          <button class="btn btn-info text-white rounded-circle ms-2 fs-4 p-0" style="height: 40px; width: 40px;">
            <i class="bi bi-envelope-fill"></i>
          </button>
        </div>
      </div>
      <div class="flex-fill d-flex align-items-center justify-content-center justify-content-md-end">
        <button class="btn btn-primary btn-lg">
          <i class="bi bi-person-lines-fill me-3"></i>Contact Me
        </button>
      </div>
    </div>
  </div>

  <div class="container h-100">
    <div class="row pb-5">
      <div class="col-12 col-lg-8 overflow-auto">
        <div class="card rounded border-0 mb-3 shadow-sm p-3">
          <div class="card-body">
            <h2 class="card-title fs-1 mb-5 fw-bold">About Me</h2>
            <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus,
              quos consequatur dolore itaque rem dolor maiores qui quidem
              fugiat voluptate quisquam, quod atque similique! Dolores
              excepturi cum temporibus optio reiciendis. Qui, magnam? Alias
              dicta voluptate delectus laborum aliquam, omnis doloribus vero
              quo? Nulla magni, maxime sit accusantium nemo error repudiandae
              mollitia ipsam molestiae provident rerum, voluptate ex odit
              recusandae aut. Architecto esse assumenda quod voluptatem. Ab
              optio dolores pariatur possimus! Reiciendis rem nulla ipsum
              nemo. Tempore commodi, quod aspernatur veritatis delectus qui,
              minima expedita minus quasi natus saepe deserunt laborum? Iste
              eos voluptas nemo! A ullam incidunt quaerat eius in optio
              voluptates, sit minima? Eaque, nesciunt sit, molestiae non ipsam
              cum ab maiores ratione quae eum quibusdam pariatur, explicabo
              id. Commodi voluptates iure recusandae quod? Accusantium magni
              sapiente officia quidem explicabo mollitia nihil quas eligendi
              nulla provident ipsum voluptatem pariatur, quaerat incidunt
              totam voluptas commodi aut! Molestiae obcaecati quis aspernatur.
            </p>
          </div>
        </div>

        <div class="card border-0 rounded shadow-sm mb-3 p-3">
          <div class="card-body">
            <h2 class="card-title mb-5 fs-1 fw-bold">Projects</h2>
            <div>
              <div class="row">
                <div class="col-md-4 mb-4 mb-md-0 mb-auto">
                  <img src="https://raw.githubusercontent.com/neeraj15022001/bootstrap-resume/master/logo.png" alt="logo" class="img-fluid bg-secondary rounded" />
                </div>
                <div class="col-md-8">
                  <p class="fs-2 fw-bolder text-dark">Project 1</p>
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Officia fuga corrupti, eligendi quam odit, laudantium
                    dolorum harum distinctio impedit, eaque tenetur! Fugiat
                    ipsum cum tenetur amet id pariatur corrupti repellat!
                    Illum labore, earum ad consequuntur architecto error
                    eveniet cum ipsam repellendus. Fuga aspernatur a illum
                    explicabo laborum blanditiis possimus maiores minima saepe
                    quos vero quam, commodi quasi repudiandae minus sit?
                  </p>
                  <a href="" class="
                        stretched-link
                        text-capitalize text-decoration-none
                      "><i class="bi bi-link-45deg me-1"></i>Find out more</a>
                </div>
                <hr class="my-4 bg-secondary" />
              </div>
            </div>
          </div>
        </div>

        <div class="card border-0 rounded shadow-sm p-3 mb-3">
          <div class="card-body">
            <h2 class="card-title fs-1 mb-5 fw-bold">Work Experience</h2>
            <div>
              <p>
                <span class="fw-bold text-secondary fs-5">Founder and Lead Developer</span><span class="text-muted">- Project 1</span>
              </p>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Asperiores rerum eos similique voluptatibus, reprehenderit ab
                dicta explicabo dolores porro id sint! Totam consequatur
                sapiente beatae quos necessitatibus excepturi cum qui!
                Accusantium aut, vitae, consequuntur nesciunt accusamus nisi
                voluptatem illum quos qui laborum consequatur quis, alias
                soluta. Quo esse, excepturi in dignissimos minus eveniet nihil
                expedita. Expedita quae eveniet nemo rem.
              </p>
            </div>
          </div>
          <hr class="my-3" />
        </div>
      </div>
      <div class="col-0 col-lg-4 overflow-auto">
        <div class="card border-0 rounded shadow-sm mb-3 p-3">
          <div class="card-body">
            <div class="
                  d-flex
                  flex-column
                  align-items-start
                  justify-content-between
                ">
              <div class="d-flex align-items-center justify-content-center mb-2">
                <i class="bi bi-geo-alt-fill text-danger"></i>
                <span class="ms-2">Punjab,India</span>
              </div>
              <div class="d-flex align-items-center justify-content-center mb-2">
                <i class="bi bi-envelope-fill text-primary"></i>
                <a href="#">Email</a>
              </div>
              <div class="d-flex align-items-center justify-content-center mb-2">
                <i class="bi bi-telephone-fill text-success"></i>
                <a href="#" class="ms-2 text-decoration-none text-dark">+91 12345 12345</a>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-0 rounded shadow-sm mb-3 p-3">
          <div class="card-body">
            <h2 class="card-title fs-3 fw-bold mb-4">Testimonial</h2>
            <div class="mb-5">
              <div>
                <div class="border-start border-5 border-primary ps-4">
                  <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    Dolore corrupti animi aperiam, corporis, rem quisquam
                    sapiente nihil dicta culpa repellendus sequi voluptatum
                    enim similique saepe! Cumque eos labore sunt quisquam.
                  </p>
                </div>
                <div class="ps-4 border-start border-5 border-white">
                  <p class="mb-0 fw-bolder text-secondary">Name</p>
                  <p class="text-muted">Position, Project Name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-0 rounded shadow-sm mb-3 p-3">
          <div class="card-body">
            <h2 class="card-title fs-3 fw-bold mb-4">Education</h2>
            <div class="d-flex align-items-center justify-content-start mb-3">
              <div class="d-flex align-items-center justify-content-center">
                <i class="m-0 p-0 bi bi-building"></i>
              </div>
              <div class="
                    d-flex
                    flex-column
                    align-items-start
                    justify-content-center
                    ms-3
                  ">
                <p class="fw-bold text-secondary mb-0">School/College Name</p>
                <p class="text-muted">BE (2019 - Current)</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card border-0 rounded shadow-sm p-3">
          <div class="card-body">
            <h2 class="card-title fs-3 fw-bold mb-4">Languages</h2>
            <div class="
                  d-flex
                  flex-column
                  align-items-start
                  justify-content-center
                  mb-3
                ">
              <p class="text-muted mb-1">
                <span class="fw-bold text-secondary">English: </span>Proficient
              </p>
              <div class="
                    d-flex
                    align-items-center
                    justify-content-center
                    text-warning
                  ">
                <i class="bi bi-star-fill"></i>
                <i class="bi bi-star-fill ms-1"></i>
                <i class="bi bi-star-fill ms-1"></i>
                <i class="bi bi-star-fill ms-1"></i>
                <i class="bi bi-star-fill ms-1"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>