Skip to main content

How To Create a Professional Resume in HTML Using Bootstrap

Do you know a little HTML? Do you want to impress at your next job interview? Of course, you do! Well, you've come to the right place. This is a professional, clean, flexible and customizable portfolio, resume and CV bootstrap template. It's ideal for everyone to showcase their online works. It's pretty savvy and minimal.

A personal website is one of the greatest assets you can have in 2021. A personal resume website puts you in complete control over your name and your personal brand. It also increases your visibility and makes it easier for employers, or even clients, to find you online.

How To Create a Professional Resume in HTML Using Bootstrap

Whatever your situation, you need a personal resume website that represents your skills. Use this resume to quickly create a memorable first impression.

All you need to do is copy-paste the code given below on your Bootstrap enabled website.

Add your personal text, creative graphics and preferred colors to these already visually impactful HTML resume code templates. Swiftly prep your resume website with your custom info. Launch your new curriculum (CV) website online. You're all ready to impress your future employer or client. It's that easy!


<div class="resume-wrapper mx-auto theme-bg-light p-5 mb-5 my-5 shadow-lg">
	<div class="resume-header">
		<div class="row align-items-center">
			<div class="resume-title col-12 col-md-6 col-lg-8 col-xl-9">
				<h2 class="resume-name mb-0 text-uppercase">Branda Grand</h2>
				<div class="resume-tagline mb-3 mb-md-0">Senior Front-end Developer</div>
			</div>
			<div class="resume-contact col-12 col-md-6 col-lg-4 col-xl-3">
				<ul class="list-unstyled mb-0">
					<li class="mb-2"><i class="fas fa-phone-square fa-fw fa-lg mr-2 "></i><a class="resume-link" href="tel:#">0123 4567 890</a></li>
					<li class="mb-2"><i class="fas fa-envelope-square fa-fw fa-lg mr-2"></i><a class="resume-link" href="mailto:#">email@yourwebsite.com</a></li>
					<li class="mb-2"><i class="fas fa-globe fa-fw fa-lg mr-2"></i><a class="resume-link" href="#">www.yourwebsite.com</a></li>
					<li class="mb-0"><i class="fas fa-map-marker-alt fa-fw fa-lg mr-2"></i>New York</li>
				</ul>
			</div>
		</div>
	</div>
	<hr/>
	<div class="resume-intro py-3">
		<div class="media flex-column flex-md-row align-items-center"> <img class="resume-profile-image mb-1 px-1 mr-md-5 ml-md-0 rounded mx-auto float-left" src="https://1.bp.blogspot.com/-sf4kWuOzzUM/X9xA8PX0PnI/AAAAAAAAES4/Y1VlvcjUXSg4zvPqEDS_mGFL0jUyutEsQCLcBGAsYHQ/s0/avatar.png" alt="image" />
			<div class="media-body text-left">
				<p class="mb-0">Summarise your career here. <a class="theme-link" href="#" target="_blank">You can make a PDF version of your resume using our free Sketch template here</a>. Donec quam felis, ultricies nec, pellentesque eu. 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. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. </p>
			</div>
		</div>
	</div>
	<hr/>
	<div class="resume-body">
		<div class="row">
			<div class="resume-main col-12 col-lg-8 col-xl-9 pr-0 pr-lg-5">
				<section class="work-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Work Experiences</h3>
					<div class="item mb-3">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Senior Software Engineer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Google | 2019 - Present</div>
						</div>
						<div class="item-content">
							<p>Role description goes here 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. Donec pede justo, fringilla vel. 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.</p>
							<ul class="resume-list">
								<li>Lorem ipsum dolor sit amet, consectetuer.</li>
								<li>Aenean commodo ligula eget dolor.</li>
								<li>Etiam ultricies nisi vel augue.</li>
							</ul>
						</div>
					</div>
					<div class="item mb-3">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Lead Software Developer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Apple | 2016 - 2019</div>
						</div>
						<div class="item-content">
							<p>Role description goes here 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. Donec pede justo, fringilla vel.</p>
							<ul class="resume-list">
								<li>Lorem ipsum dolor sit amet, consectetuer.</li>
								<li>Aenean commodo ligula eget dolor.</li>
							</ul>
						</div>
					</div>
					<div class="item mb-3">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Senior Software Developer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Dropbox | 2014 - 2016</div>
						</div>
						<div class="item-content">
							<p>Role description goes here 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.</p>
						</div>
					</div>
					<div class="item">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Senior Developer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Uber | 2013 - 2014</div>
						</div>
						<div class="item-content">
							<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus. </p>
						</div>
					</div>
					<div class="item">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Backend Developer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Amazon | 2014 - 2016</div>
						</div>
						<div class="item-content">
							<p>Role description goes here 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.</p>
						</div>
					</div>
					<div class="item">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Frontend Developer</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Startup | 2013 - 2014</div>
						</div>
						<div class="item-content">
							<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus. </p>
						</div>
					</div>
				</section>
				<section class="project-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Projects</h3>
					<div class="item mb-3">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Project Lorem Ipsum</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Open Source</div>
						</div>
						<div class="item-content">
							<p>You can use this section for your side projects. You can <a href="#" class="theme-link">provide a project link here</a> as well. 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.</p>
						</div>
					</div>
					<div class="item">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Project Sed Fringilla</h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Open Source</div>
						</div>
						<div class="item-content">
							<p>You can use this section for your side projects. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
						</div>
					</div>
					<div class="item">
						<div class="item-heading row align-items-center mb-2">
							<h4 class="item-title col-12 col-md-6 col-lg-8 mb-2 mb-md-0">Project Praesent </h4>
							<div class="item-meta col-12 col-md-6 col-lg-4 text-muted text-left text-md-right">Open Source</div>
						</div>
						<div class="item-content">
							<p>You can use this section for your side projects. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
						</div>
					</div>
				</section>
			</div>
			<aside class="resume-aside col-12 col-lg-4 col-xl-3 px-lg-4 pb-lg-4">
				<section class="skills-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Skills</h3>
					<div class="item">
						<h4 class="item-title">Technical</h4>
						<ul class="list-unstyled resume-skills-list">
							<li class="mb-2">JavaScript/Angular/React/Vue</li>
							<li class="mb-2">Python/Ruby/PHP</li>
							<li class="mb-2">Node.js/ASP.NET</li>
							<li class="mb-2">PostgreSQL/MySQL</li>
							<li class="mb-2">Object-oriented design</li>
							<li class="mb-2">Design and implement database structures</li>
							<li>Lead and deliver complex software systems</li>
						</ul>
					</div>
					<div class="item">
						<h4 class="item-title">Professional</h4>
						<ul class="list-unstyled resume-skills-list">
							<li class="mb-2">Effective communication</li>
							<li class="mb-2">Team player</li>
							<li class="mb-2">Strong problem solver</li>
							<li>Good time management</li>
						</ul>
					</div>
				</section>
				<section class="education-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Education</h3>
					<ul class="list-unstyled resume-education-list">
						<li class="mb-3">
							<div class="resume-degree font-weight-bold">MSc in Computer Science</div>
							<div class="resume-degree-org text-muted">University College London</div>
							<div class="resume-degree-time text-muted">2010 - 2011</div>
						</li>
						<li>
							<div class="resume-degree font-weight-bold">BSc Maths and Physics</div>
							<div class="resume-degree-org text-muted">Imperial College London</div>
							<div class="resume-degree-time text-muted">2007 - 2010</div>
						</li>
					</ul>
				</section>
				<section class="education-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Awards</h3>
					<ul class="list-unstyled resume-awards-list">
						<li class="mb-3">
							<div class="font-weight-bold">Award Lorem Ipsum</div>
							<div class="text-muted">Microsoft lorem ipsum (2019)</div>
						</li>
						<li>
							<div class="font-weight-bold">Award Donec Sodales</div>
							<div class="text-muted">Oracle Aenean (2017)</div>
						</li>
					</ul>
				</section>
				<section class="skills-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Languages</h3>
					<ul class="list-unstyled resume-lang-list">
						<li class="mb-2">English <span class="text-muted">(Native)</span></li>
						<li>Spanish <span class="text-muted">(Professional)</span></li>
					</ul>
				</section>
				<section class="skills-section py-3">
					<h3 class="text-uppercase resume-section-heading mb-4">Interests</h3>
					<ul class="list-unstyled resume-interests-list mb-0">
						<li class="mb-2">Climbing</li>
						<li class="mb-2">Snowboarding</li>
						<li class="mb-2">Photography</li>
						<li>Travelling</li>
					</ul>
				</section>
			</aside>
		</div>
	</div>
	<hr/>
	<div class="resume-footer text-center">
		<ul class="resume-social-list list-inline mx-auto mb-0 d-inline-block text-muted">
			<li class="list-inline-item mb-lg-0 mr-3"><a class="resume-link" href="#"><i class="fab fa-github-square fa-2x mr-2" data-fa-transform="down-4"></i><span class="d-none d-lg-inline-block text-muted">github.com/username</span></a></li>
			<li class="list-inline-item mb-lg-0 mr-3"><a class="resume-link" href="#"><i class="fab fa-linkedin fa-2x mr-2" data-fa-transform="down-4"></i><span class="d-none d-lg-inline-block text-muted">linkedin.com/in/username</span></a></li>
			<li class="list-inline-item mb-lg-0 mr-lg-3"><a class="resume-link" href="#"><i class="fab fa-twitter-square fa-2x mr-2" data-fa-transform="down-4"></i><span class="d-none d-lg-inline-block text-muted">@twittername</span></a></li>
		</ul>
	</div>
</div>

There are plenty of ways to create your personal resume website. Check this professional looking Blogger theme for your next resume website. Branda Grand is a premium multi-purpose Blogger theme made for professionals who love to build their own personal brand.

It is designed to present and market your skills, work experiences, products, and services to potential clients or future employers most professionally and effectively. you're certain to create a stunning personal site that fits your brands and goals best. Start making one now, so you can better represent yourself online!

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM