BS Theme "The Band"
Create a Theme: "The Band"
You will learn how to create a Bootstrap theme from scratch on this page.
Our plan is to commence with a basic HTML page and gradually incorporate additional elements until we have a fully functional, customized, and mobile-friendly website.
The output will look like this, and you can edit, save, distribute, utilize, or do anything else you want with it:
-----example mukavu -----
HTML Start Page
We will start with the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
<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
Include the Bootstrap CDN, a jQuery link, and HTML components included in a container (.container):
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-minify="1" rel="stylesheet" href="https://codingask.com/wp-content/cache/min/1/bootstrap/3.4.1/css/bootstrap.min.css?ver=1730228483">
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/ajax/libs/jquery/3.5.1/jquery.min.js?ver=1730228484" defer></script>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/bootstrap/3.4.1/js/bootstrap.min.js?ver=1730228484" defer></script>
</head>
<body>
<div class="container">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>
Result:
THE BAND
We love music!
We have created a fictional band website. Lorem ipsum..
Center Text
To center the text inside the container, apply the .text-center class. To make the “We love music” text italic, use the <em> element:
Example
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
Result:
-----example mukavu -----
Add Padding
To add padding to the container and make it seem nice, use CSS:
Example
.container {
padding: 80px 120px;
}
Result:
-----example mukavu -----
Add a Grid
Construct three columns with the same width (.col-sm-4), then insert the text and images into the container:
Example
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<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="Random Name" title="Bs Theme &Quot;The Band&Quot; 1" data-lazy-src="bandmember.jpg"><noscript><img decoding="async" src="bandmember.jpg" alt="Random Name" title="Bs Theme &Quot;The Band&Quot; 1"></noscript>
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<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="Random Name" title="Bs Theme &Quot;The Band&Quot; 1" data-lazy-src="bandmember.jpg"><noscript><img decoding="async" src="bandmember.jpg" alt="Random Name" title="Bs Theme &Quot;The Band&Quot; 1"></noscript>
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<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="Random Name" title="Bs Theme &Quot;The Band&Quot; 1" data-lazy-src="bandmember.jpg"><noscript><img decoding="async" src="bandmember.jpg" alt="Random Name" title="Bs Theme &Quot;The Band&Quot; 1"></noscript>
</div>
</div>
</div>
Result:
-----example mukavu -----
Add a Carousel
A carousel should be made and added before the container:
Example
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<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="New York" title="Bs Theme &Quot;The Band&Quot; 4" data-lazy-src="ny.jpg"><noscript><img decoding="async" src="ny.jpg" alt="New York" title="Bs Theme &Quot;The Band&Quot; 4"></noscript>
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<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="Chicago" title="Bs Theme &Quot;The Band&Quot; 5" data-lazy-src="chicago.jpg"><noscript><img decoding="async" src="chicago.jpg" alt="Chicago" title="Bs Theme &Quot;The Band&Quot; 5"></noscript>
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<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="Los Angeles" title="Bs Theme &Quot;The Band&Quot; 6" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" title="Bs Theme &Quot;The Band&Quot; 6"></noscript>
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Result:
-----example mukavu -----
Style The Carousel
The carousel can be styled with CSS:
Example
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
Result:
-----example mukavu -----
Add Tour Container
Create a new container and fill it with a list (.list-group and .list-group-item).
Give the container a custom class (.bg-1) with a black background and give its offspring the following styles:
Example
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>
<div class="bg-1">
<div class="container">
<h3 class="text-center">TOUR DATES</h3>
<p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Result:
-----example mukavu -----
Add Labels & Badges
Use a label (.label) and a badge (.badge) to indicate which tickets are still available or sold out:
Example
<ul class="list-group">
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">November <span class="badge">3</span></li>
</ul>
Result:
-----example mukavu -----
Add Thumbnail Images
Add three equal-width columns (.col-sm-4) to the Tour container:
Include an image in each column.
Next, resize the image to a thumbnail using the .img-thumbnail class.
Normally, the <img> element would already have the .img-thumbnail class added to it. To define an image text as well, we have positioned a thumbnail container around the image in this example.
Example
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<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="Paris" title="Bs Theme &Quot;The Band&Quot; 7" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" alt="Paris" title="Bs Theme &Quot;The Band&Quot; 7"></noscript>
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<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="New York" title="Bs Theme &Quot;The Band&Quot; 8" data-lazy-src="newyork.jpg"><noscript><img decoding="async" src="newyork.jpg" alt="New York" title="Bs Theme &Quot;The Band&Quot; 8"></noscript>
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<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="San Francisco" title="Bs Theme &Quot;The Band&Quot; 9" data-lazy-src="sanfran.jpg"><noscript><img decoding="async" src="sanfran.jpg" alt="San Francisco" title="Bs Theme &Quot;The Band&Quot; 9"></noscript>
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>
Result:
-----example mukavu -----
Style Lists, Thumbnails & Buttons
To style the thumbnail photos and the list, use CSS. In this instance, we have eliminated the rounded borders from the list and attempted to make the thumbnail photos resemble cards by eliminating their borders and setting each image’s width to 100%.
Additionally, we changed the Bootstrap .btn class’s default styles to a black button:
Example
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
Result:
-----example mukavu -----
Add a Modal
First, change all buttons inside the thumbnail from <button class=”btn”> Buy Tickets </button> to <button class=”btn” data-toggle=”modal” data-target=”#myModal” > Buy Tickets </button>. These buttons are used to open the actual modal.
Examine the code below to build the modal:
Example
<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>
Result (click on the “Buy Tickets” button to see the effect):
-----example mukavu -----
Add Contact Container
Make a new container called .col-md-4 and .col-md-8, with two unequally wide columns.
Put form controls in the second column and informative icons with text inside the first:
Example
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
Result:
-----example mukavu -----
Add Toggable Tabs
Include tabs (.nav nav-tabs) with “quotes” from the band members inside the contact container:
Example
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
</div>
</div>
Result:
-----example mukavu -----
Add Map/Location Image
Add a map or an image of the site.
Example
<!-- Image of location/map -->
<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" style="width:100%" alt="Bs Theme &Quot;The Band&Quot; -" title="Bs Theme &Quot;The Band&Quot; 10" data-lazy-src="map.jpg"><noscript><img decoding="async" src="map.jpg" style="width:100%" alt="Bs Theme &Quot;The Band&Quot; -" title="Bs Theme &Quot;The Band&Quot; 10"></noscript>
Result:
-----example mukavu -----
Add a Navbar
Include a collapsible navigation bar at the top of the page for smaller screens:
Example
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Result:
-----example mukavu -----
A helpful hint is to use the navbar-right class to align the navigation links to the right.
Use the .dropdown class on a link in the navbar to make it function as a dropdown menu.
Style The Navbar
Use CSS to alter the navigation bar:
Example
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
Result:
-----example mukavu -----
Add Scrollspy
To have navbar links automatically refresh when scrolling, add scrollspy:
Example
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
Add a Footer
1. Add some text to the <footer> element.
2. Style the footer using CSS.
3. Include a “Up Arrow” icon that, when clicked, will navigate the user to the top of the page.
4. Initialize the tooltip plugin using jQuery:
Example
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools" target="_blank" rel="noopener">www.w3schools.com</a></p>
</footer>
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
});</script>
Result:
-----example mukavu -----
Adding Smooth Scrolling
To enable seamless scrolling (when clicking on the links in the navbar), use jQuery:
Example
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
});</script>
Final Touch
Choose a typeface that you like to add to personalize your theme. The Google Font Library’s “Montserrat” and “Lato” were utilized.
In the <head> section, provide a link to the font:
<link href=”https://fonts.googleapis.com/css?family=Montserrat” rel=”stylesheet” type=”text/css”>
<link href=”https://fonts.googleapis.com/css?family=Lato” rel=”stylesheet” type=”text/css”>
Then, you can utilize them on this page:
Example
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}
We have also added some extra style to some elements:
Example
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
