Bootstrap Themes
BS Theme "Simply Me"
Create a Theme: "Simply Me"
This article will demonstrate how to create a Bootstrap theme from scratch.
We’ll start with a simple HTML page and gradually add additional components until we have a fully functional, personalized, and responsive website.
The end result will look like this, and you are free to change, save, share, use, or do whatever you want with it.
-----example mukavu -----
HTML Start Page
We’ll begin with the following HTML page:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Bird" title="BS Theme "Simply Me" 1" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" alt="Bird" title="BS Theme "Simply Me" 1"></noscript>
<h3>I'm an adventurer</h3>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Add Bootstrap CDN and Put Elements in Container
Add Bootstrap CDN and a link to jQuery, then place HTML components inside a container:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme Simply Me</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-minify="1" rel="stylesheet" href="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/css/bootstrap.min.css?ver=1770186369">
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/ajax/libs/jquery/3.5.1/jquery.min.js?ver=1743310438" defer></script>
<script data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/bootstrap/3.4.1/js/bootstrap.min.js?ver=1743310438" defer></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Bird" title="BS Theme "Simply Me" 1" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" alt="Bird" title="BS Theme "Simply Me" 1"></noscript>
<h3>I'm an adventurer</h3>
</div>
</body>
</html>
Result:
Add Background Color and Center Text
1. Add a custom class (.bg-1) to the container to change the background color.
2. Use the .text-center class to center the text within the container:
Example
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Bird" title="BS Theme "Simply Me" 1" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" alt="Bird" title="BS Theme "Simply Me" 1"></noscript>
<h3>I'm an adventurer</h3>
</div>
</body>
Result:
Circle Image
Use the .img-circle class to transform the picture into a circle.
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-circle" alt="Bird" title="BS Theme "Simply Me" 6" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" class="img-circle" alt="Bird" title="BS Theme "Simply Me" 6"></noscript>
Result:
More Content
Add more content and place it in new containers.
Example
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
</style>
</head>
<body>
<div class="container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-circle" alt="Bird" title="BS Theme "Simply Me" 6" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" class="img-circle" alt="Bird" title="BS Theme "Simply Me" 6"></noscript>
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>
Result:
Add Padding
Let’s make the containers seem better by adding some padding.
Example
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Result:
Add a Button
Add a button in the middle container:
Example
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
Result:
Add an Icon
Add a search icon to the “Search” button.
Example
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Result:
Modify The Third Container (Add Grid)
Add three equal-width columns inside the third container (.col-sm-4):
Example
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image" title="BS Theme "Simply Me" 13" data-lazy-src="birds1.jpg"><noscript><img decoding="async" src="birds1.jpg" alt="Image" title="BS Theme "Simply Me" 13"></noscript>
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image" title="BS Theme "Simply Me" 14" data-lazy-src="birds2.jpg"><noscript><img decoding="async" src="birds2.jpg" alt="Image" title="BS Theme "Simply Me" 14"></noscript>
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Image" title="BS Theme "Simply Me" 15" data-lazy-src="birds3.jpg"><noscript><img decoding="async" src="birds3.jpg" alt="Image" title="BS Theme "Simply Me" 15"></noscript>
</div>
</div>
</div>
Result:
Make The Images Responsive
Add the .img-responsive class to all images.
To center the first image, add display:inline (the .img-responsive class adds display:block, which causes the image to bounce to the left of the screen).
If you want the image to fill the entire width of the screen as it begins to stack, set width:100% to the image.
When opening the example, remember to resize the screen to observe the responsive effect.
Example
<!-- The circular bird -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-responsive img-circle" style="display:inline" alt="Bird" title="BS Theme "Simply Me" 17" data-lazy-src="bird.jpg"><noscript><img decoding="async" src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird" title="BS Theme "Simply Me" 17"></noscript>
<!-- The birds in our grid: -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 18" data-lazy-src="birds1.jpg"><noscript><img decoding="async" src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 18"></noscript>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 19" data-lazy-src="birds2.jpg"><noscript><img decoding="async" src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 19"></noscript>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 20" data-lazy-src="birds3.jpg"><noscript><img decoding="async" src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image" title="BS Theme "Simply Me" 20"></noscript>
Add a Navbar
Add a normal navigation bar at the top of the page, making it collapsible on smaller screens:
Example
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
Result:
Style The Navbar
Use CSS to alter the navigation bar:
Example
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
Result:
Add a Footer
Create a footer and use CSS to style it.
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com" target="_blank" rel="noopener">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your theme by selecting a typeface that you prefer. We used “Montserrat” from Google Font Library.
Refer to the font in the <head> section.
<link href=”https://fonts.googleapis.com/css?family=Montserrat”, rel=”stylesheet”>
Then you can use it in the page.
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also designed a “helper” margin class to add extra space where we believe it is needed, usually after each <h3> and <img> element.
Example
.margin {margin-bottom: 45px;}
