How to Create a Custom Bootstrap Theme from Scratch
Bootstrap, the most popular front end framework in the world, makes it easier for web designers and developers to quickly generate creative website themes. So, let’s build a Bootstrap website that works across modern web browsers and different viewports such as big screens and mobile devices.
Startup: Free Bootstrap Builder
Looking for a Bootstrap Online Builder?
- Try our Bootstrap Builder and create unlimited projects for unlimited clients.
- Start to build a website using our Bootstrap Templates.
Bootstrap provides helpful ways to solve different challenges on building responsive website templates through its powerful and robust set of components. Creating a bootstrap theme without reinventing the base HTML, CSS and JavaScript for each project is the main feature of the framework. Confidently, it offers out-of-the-box solutions along with the other third-party modules you can integrate it without worrying about the support since it has a large community of developers ready to help you in case you bump into some issues.
While there are plenty of existing online and offline bootstrap builders that you can use to quickly create prototype websites fast, bootstrap makes it easier for you to control almost every part of the design and layouts of your website template, be it a simple blog or a big business e-commerce website.
Today, I am going to show you how you can create a Bootstrap theme from scratch in minutes.
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Free Email BuilderFree Email TemplatesMore about Bootstrap:
- Bootstrap Columns
- Bootstrap Carousel
- Bootstrap Buttons
- Bootstrap Grid
- Bootstrap Modal
- Bootstrap Navbar
- Bootstrap Flexbox
Wireframing the Bootstrap theme
Before we start coding the Bootstrap theme, let’s first build its wireframe. I am using Mockflow for our bootstrap theme’s wireframe. Technically, our wireframe will include the following components:
- Navigation
- Hero / Header Section
- About Us Section
- Services Section
- Counter Section
- Testimonials Section
- Contact Section
- Footer
Bootstrap Theme File Structure
After laying out our design on Mockflow, it’s time to create the necessary files and folder first before we get into the basic theme’s markup. We need to create the following files and folders following this composition:
root/
|—css/
|——custom.css
|—webfonts/
|—images/
|—js/
|——script.js
|—index.html
Downloading Bootstrap’s Source Files
Next, we need to download the Bootstrap source files and add them to our JavaScript and CSS folder. To do this, go to the Bootstrap download page and download the source files of any theme. Inside the download source files, we need to copy the bootstrap.min.css to our CSS folder. We also need to copy the bootstrap.min.js and bootstrap.bundle.min.js on our JavaScript folder.
Downloading necessary third jQuery party plugins of a template
After downloading the bootstrap’s source files, we also need to download the necessary third party jQuery / JavaScript files that we will use on our Bootstrap theme. First, let’s start with jQuery. Go to the jQuery download page and download the latest minified compressed version and place it inside our JavaScript folder. Next, let’s download the jQuery Easing plugin on its GitHub page and place the jquery.easing.min.js file in our JavaScript folder. One last plugin to download is the Scrollspy. Place the scrollspy.min.js file to our JavaScript folder.
After downloading all of these files we’ll have the following jQuery/JavaScript files inside our JavaScript folder:
- bundle.min.js
- easing.min.js
- min.js
- js
- min.js
Downloading Font Awesome
The process of creating a theme requires downloading the Font Awesome source files via its download page for us to be able to add icons to our project. Once downloaded, copy the webfonts folder inside our root folder and the all.css file to our CSS folder.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther Products
Images
I’ve already set up all the images that we need for this custom theme. You can download them here and place these images inside the images theme folder.
Note: All illustration images came from Freepik.
Basic markup for creating a Bootstrap theme
After downloading all of the necessary files for our project, it’s now time to set up the basic starter html codes along with the links to our CSS and jQuery/JavaScript files. Inside the index.html file, we need to add the following codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Kleo Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/all.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/scrollspy.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
After a creating of the basic Bootstrap theme markup, let’s work on the navbar section on the same file. Navbar is a responsive component of a website that serves as navigation scheme and collapse or is toggleable on mobile viewport which transforms into a horizontal format as the available viewport width increases. We will be adding bootstraps navigation markup and then add the class normal-nav which we will be using later on to transform the navbar into a sticky navbar, a fixed navbar at the top of the header section while the user scrolls. We will use the anchor tags to navigate throughout the website smoothly via the website id of each section using jQuery and automatically update the links in the navigation list based on scroll position via the Scrollspy jQuery plugin.
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-kleo normal-nav">
<div class="container">
<a class="navbar-brand logo" href="">
<img src="images/kleo-logo.png" height="21">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-center" id="mySidenav">
<li class="nav-item active">
<a href="#top" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#testimonials" class="nav-link">Testimonials</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
Hero / Header Section
Next, let’s create our hero / header section. Typically this is a jumbotron component but we will not use this bootstrap component this time, instead a regular section markup which has all the necessary bootstrap and custom classes that we need to make this look good later on our theme’s CSS. We need to add the id top on our section tag so that we can be able to scroll to the top on this part of our website as we add the necessary jQuery codes for this later on.
<!-- Header Start -->
<section class="header-bg align-items-center position-relative d-flex" id="top">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="header-title">
<p class="highlight font-weight-bold size-16 text-uppercase header-small-title title mb-3 ml-1">Bootstrap Theme</p>
<h1 class="font-weight-bold main-title mb-4">Creating Bootstrap Theme From Scratch</h1>
<p class="text-sub ml-2 mb-4 pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="" class="btn btn-primary ml-2">Learn More <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
</div>
</div>
<div class="col-lg-5 offset-lg-1">
<div class="mt-5 mt-lg-0">
<img src="images/header-2.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
</section>
<!-- Header End -->
About Us Section
Now our Bootstrap template needs an about us section. This will be a simple one column for the title and two column section where we will include our dummy text to the second column and an image to the first column which came from Freepik. Finally, we will place the id about on our section tag for our jQuery navigation scroll feature later on.
<!-- About Start -->
<section class="section bg-grey" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class="highlight header-colorize text-uppercase mb-3">About Us</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-5">
<img src="images/header-about.png" alt="" class="img-fluid mx-auto d-block">
</div>
<div class="col-lg-6 offset-lg-1">
<div class="text-sub mt-5 mt-lg-0">
<h3 class="title font-weight-medium mb-4">A perfect bootstrap theme for all types of business.</h3>
<p class="mb-4 size-15">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.</p>
<p class="mb-4 size-15">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<a href="" class="learn-more size-15">Learn more <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- About End -->
Services Section
Next, the template needs a services section. For this part of our theme, we will use font-awesome icons for each service using dummy text in a three layout grid with the one-column layout at the top for the title. We will also include the id services on our section tag for our navigation scrolling feature later on our jQuery codes.
<!-- Services Start -->
<section class="section" id="services">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<div class="text-center mb-5">
<h2 class="highlight header-colorize text-uppercase mb-3">Our Services</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="services-container pr-4 pl-4">
<div class="services-icon mt-3">
<i class="far fa-window-maximize"></i>
</div>
<h4 class="mb-4 mt-4 services-title">Web Design</h4>
<p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="services-container pr-4 pl-4">
<div class="services-icon mt-3">
<i class="far fa-window-restore"></i>
</div>
<h4 class="mb-4 mt-4 services-title">App Development</h4>
<p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="services-container pr-4 pl-4">
<div class="services-icon mt-3">
<i class="fas fa-mobile-alt"></i>
</div>
<h4 class="mb-4 mt-4 services-title">Mobile Development</h4>
<p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</div>
</section>
<!-- Services End -->
Accomplished Projects Counter Section
Now that we got the services section set up, we will add a four layout grid accomplished project section using font-awesome icons which we will animate later on via jQuery.
<!-- Accomplished Start -->
<Section class="section accomplished-counter-bg">
<div class="accomplished-counter-bg"></div>
<div class="container">
<div class="row align-items-center" id="accomplished-counter">
<div class="col-lg-3 col-md-6">
<div class="accomplished-counter-box text-center px-4 py-5 mb-4 mb-lg-0">
<div class="text-white">
<i class="far fa-window-maximize accomplished-counter-icon mx-auto"></i>
<h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="90">0</span>+</h1>
<p class="mb-0 text-white-70">Websites</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
<div class="text-white">
<i class="far fa-window-restore accomplished-counter-icon mx-auto"></i>
<h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="82">0</span>+</h1>
<p class="mb-0 text-white-70">Applications</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
<div class="text-white">
<i class="fas fa-mobile-alt accomplished-counter-icon mx-auto"></i>
<h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="15">0</span></h1>
<p class="mb-0 text-white-70">Mobile Apps</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
<div class="text-white">
<i class="far fa-smile-beam accomplished-counter-icon mx-auto"></i>
<h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="187">0</span></h1>
<p class="mb-0 text-white-70">Clients</p>
</div>
</div>
</div>
</div>
</div>
</Section>
<!-- Accomplished End -->
Testimonials Section
Next, we will now integrate the bootstrap carousel feature on our theme’s testimonials section. If you are not familiar with carousels, it is simply a slideshow component that is cycling through elements using various media elements such as images, slides or text like a normal rotating carousel in a carnival.
We will be using bootstrap carousel components to cycle through our dummy client’s avatar, testimonials and names. We will also put the testimonials id on our section tag for navigation scrolling later on.
<!-- Testimonials Start -->
<section class="section bg-grey" id="testimonials">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class="highlight text-uppercase mb-3 header-colorize">Testimonials</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 col-center m-auto">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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 carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="img-box"><img src="images/client.jpg" alt=""></div>
<p class="testimonial">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet."</p>
<p class="overview"><b>Kit Johnson</b>, Account Analyst</p>
</div>
<div class="item carousel-item">
<div class="img-box"><img src="images/client2.jpg" alt=""></div>
<p class="testimonial">"Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio."</p>
<p class="overview"><b>Rick Gomez</b>, App Developer</p>
</div>
<div class="item carousel-item">
<div class="img-box"><img src="images/client3.jpg" alt=""></div>
<p class="testimonial">"Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum."</p>
<p class="overview"><b>Chris Smith</b>, CEO, ProTools</p>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials End -->
Contact Section
The creation of our Bootstrap template implies a contact section. The contact section is one of the most valuable parts of a website which is often the go-to for a new visitor on a mission. On this part of our theme, we’re going to add one column grid for our title and another two-column layout grid for the contact inner content. The first column of the two layout grid will have the dummy contact information and the second column will include a contact form that the users can use to send us a message. We also need to include the contact id at the section tag for the navigation smooth scrolling effect later when we add our jQuery codes.
<!-- Contact Start -->
<section class="section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class="highlight header-colorize text-uppercase mb-3">Contact</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="contact-info">
<h4 class="title mb-4">Get Connected</h4>
<p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="text-sub size-15 mb-4"><i class="fas fa-phone"></i> 659-888-5495</p>
<p class="text-sub size-15 mb-4"><i class="fas fa-mobile-alt"></i> +1-689-888-5495</p>
<p class="text-sub size-15 mb-4"><i class="fas fa-envelope"></i> info@example.com</p>
<p class="text-sub size-15 mb-4"><i class="fas fa-map-marker-alt"></i> 200 Lexington Ave, New York, NY 10016, USA</p>
</div>
</div>
<div class="col-lg-7 offset-lg-1">
<div class="custom-form mt-4 mt-lg-0">
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Your Email.." />
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" class="form-control" id="subject" placeholder="Enter Your Subject.." />
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" rows="4" class="form-control" placeholder="Enter Your Message.."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button href="" class="btn btn-primary"><span class="mr-2 left-icon"><i class="fas fa-envelope"></i></span> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- contact End -->
Finally, we will be adding a footer section’s markup at the very bottom of our Bootstrap theme. This will simply have a copyright symbol and the year the theme is made.
<!-- Footer Start -->
<section class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="text-center white">2020 © Kleo. All Rights Reserved.</p>
</div>
</div>
</div>
</section>
<!-- Footer End -->
After adding all of our markups, the template will look something like this by now. Don’t worry if it looks like a skeleton theme. We will put some CSS in it using our custom.css on the next part of the tutorial.
Adding the Stylesheet
To put some magic on our markup, we will now be adding our CSS for each section of our Bootstrap theme inside the custom.css file.
General CSS
Before we move any further, we need to add our general CSS. These are CSS codes that will simply format our basic markup such as the font that we’re going to use throughout our theme, the starting font-size and background.
/*********************************************/
/* GENERAL CSS "/
/*********************************************/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
body {
font-family: "Poppins", sans-serif;
color: #343a40;
background: #ffffff;
}
a {
outline: none;
color: #6C55A3;
text-decoration: none !important;
}
a:hover {
color: #53407f;
}
p {
line-height: 1.9;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
}
Utility CSS
Next, we will be adding our utility CSS. These CSS codes will include many classes available to do small little one-off things such as classes for a specific font-size, colors, backgrounds and classes to set specific layout properties.
/*********************************************/
/* UTILITY CSS "/
/*********************************************/
.text-sub {
color: #9b9bae !important;
}
.bg-grey {
background-color: #F8F6FA !important;
}
.title {
color: #343a40;
}
.header-colorize {
font-weight: 700;
color: #6C55A3;
}
.section {
padding: 120px 0px 120px 0px;
position: relative;
}
.size-14 {
font-size: 14px;
}
.size-15 {
font-size: 15px;
}
.size-18 {
font-size: 18px;
}
.right-icon {
line-height: 0;
font-size: 19px;
}
.learn-more {
color: #6C55A3;
font-weight: 700;
}
.highlight {
background: rgba(122, 96, 183, 0.1);
-webkit-box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
color: #6c55a3;
border-radius: 13px;
display: inline-block;
padding: .25em .4em;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.header-bg {
padding: 170px 0 140px;
background-image: url('../images/header-background.png');
background-size: cover;
background-repeat: no-repeat;
background-position: left bottom;
}
.header-bg .header-small-title {
letter-spacing: 2px;
}
.header-bg .main-title {
font-size: 2.8rem;
line-height: 1.35;
color: #6C55A3;
}
Bootstrap basic navbar design contains the generic design of a navbar. On this part of our stylesheet, we’re going to customize the look of our navbar to make it completely different, matching our theme’s design. We will start by styling up our link items, logo and moving towards the toggling effect design.
/*********************************************/
/* NAVBAR CSS "/
/*********************************************/
.nav-item .nav-link {
text-decoration: none;
display: inline-block;
color: #343a40;
}
.navbar-kleo {
margin-bottom: 0px;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: transparent;
padding: 14px 0px;
width: 100%;
border-radius: 0px;
z-index: 999;
}
.navbar-brand {
cursor: pointer;
}
.navbar-kleo .navbar-nav li a {
line-height: 26px;
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
font-weight: 600;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background-color: transparent !important;
padding: 6px 0;
margin: 0 20px;
}
.navbar-kleo .navbar-nav li .nav-link {
padding-right: 0px;
padding-left: 0px;
}
.navbar-kleo .navbar-toggles {
font-size: 18px;
background: 0 0;
border: 1px solid transparent;
color: #ffffff;
outline: 0;
padding: .26rem .76rem;
}
.navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .navbar-nav li a:active {
color: #ffffff !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
background-color: transparent;
border-color: #6C55A3;
}
.navbar-toggler {
font-size: 24px;
margin-top: 5px;
margin-bottom: 0px;
color: #000;
}
.fas.fa-bars {
color: #6C55A3 !important;
}
.sticky-nav.navbar-kleo .navbar-toggles {
border: 1px solid transparent;
padding: .26rem .76rem;
outline: 0;
}
.sticky-nav.navbar-kleo {
margin-top: 0px;
background-color: #ffffff;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
color: #000000 !important;
}
.sticky-nav.navbar-kleo .navbar-nav {
margin-top: 0px;
}
.sticky-nav.navbar-kleo .navbar-nav li a {
color: #8a8aa0 !important;
}
.sticky-nav.navbar-kleo .navbar-nav li.active a, .sticky-nav.navbar-kleo .navbar-nav li a:hover, .sticky-nav.navbar-kleo .navbar-nav li a:active {
color: #6C55A3 !important;
}
.navbar-toggler:focus {
outline: none;
}
Bootstrap by default provides different styles of buttons with generic design. For this section, we’re going to customize the background, color and font of our bootstrap button. We will specifically work on the primary size of the bootstrap button since we will not use the other form of bootstrap buttons throughout our theme.
/*********************************************/
/* BUTTONS CSS "/
/*********************************************/
.btn {
border-radius: 4px;
padding: 12px 30px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-weight: 700;
font-size: 15px !important;
}
.btn:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.btn:hover {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.btn.btn-primary {
color: #ffffff;
background-color: #6C55A3 !important;
border: 1px solid #6C55A3 !important;
-webkit-box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active {
background-color: #53407f !important;
border: 1px solid #53407f !important;
-webkit-box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
color: #ffffff !important;
}
Services Section CSS
Now that we finish brushing off our custom CSS, let’s move on the services section and add a little bit of customization. Basically, the following CSS codes will simply set some properties to the font-awesome icons such as the background, size and border that we used on our markup above.
/*********************************************/
/* SERVICES CSS "/
/*********************************************/
.services-container .services-icon {
height: 72px;
width: 72px;
background: rgba(108, 85, 163, 0.08);
font-size: 30px;
display: inline-block;
border-radius: 50% 50%;
line-height: 74px;
text-align: center;
color: #6C55A3;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.services-container .services-title {
font-size: 1.4rem;
color: #343a40;
}
Accomplished Projects Counter Section CSS
Now it’s time to put some CSS for our accomplished projects counter. We will put each grid item in a border box which later we will animate the content inside of each box via jQuery.
/********************************************************************/
/* ACCOMPLISHED PROJECTS COUNTER CSS "/
/*******************************************************************/
.accomplished-counter-icon {
font-size: 52px;
}
.accomplished-counter-bg .accomplished-counter-box {
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.accomplished-accomplished-counter-bg {
background: #6C55A3;
}
.accomplished-counter-bg .accomplished-counter-bg {
background-color: #6C55A3;
opacity: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Forms CSS
Next, let’s set up some CSS for our forms. Bootstrap, just like any front-end frameworks, gives forms basic styling to enhance design and user experience while using them, but we’re going to customize it a little bit especially the outline and font-sizes.
/*********************************************/
/* FORMS CSS "/
/*********************************************/
.form-control:focus {
background-color: #fbfbfb;
border-color: #6C55A3;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control {
background-color: rgba(52, 58, 64, 0.01);
border: 1px solid rgba(155, 155, 174, 0.3);
padding: 9px 11px;
font-size: 14px;
}
.form-control::-webkit-input-placeholder {
font-size: 15px;
color: #9b9bae;
}
.form-control:-ms-input-placeholder {
color: #9b9bae;
font-size: 15px;
}
.form-control::-ms-input-placeholder {
font-size: 15px;
color: #9b9bae;
}
.form-control::placeholder {
color: #9b9bae;
font-size: 15px;
}
Carousel CSS
Now for our carousel CSS, we will set up each item via the img-box class and give each testimonials some size and border radius. We will also style the carousel navigation colors and forms so instead of a circular form, we will format it into a box type form.
/*********************************************/
/* CAROUSEL CSS "/
/*********************************************/
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
margin: 50px auto;
padding: 0 70px;
}
.carousel .item {
color: #999;
font-size: 14px;
text-align: center;
overflow: hidden;
min-height: 290px;
}
.carousel .item .img-box {
width: 135px;
height: 135px;
margin: 0 auto;
padding: 5px;
border: 1px solid #ddd;
border-radius: 50%;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 30px 0 10px;
}
.carousel .overview {
font-style: italic;
}
.carousel .overview b {
text-transform: uppercase;
color: #6C55A3;
}
.carousel .carousel-control {
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control i {
font-size: 68px;
line-height: 42px;
position: absolute;
display: inline-block;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
}
.carousel .carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 21px;
height: 0px;
margin: 1px 3px;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {
background: #6C55A3;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
Our footer has a simple design. We will simply put a padding at the top and give a simple white color on our footer text.
/*********************************************/
/* FOOTER CSS "/
/*********************************************/
.footer {
background-color: #6C55A3;
padding-top: 20px;
}
.footer p {
color: #fff;
}
Responsive CSS
Finally, it’s time to add some responsive CSS to the theme’s stylesheet. We will start with mobile devices first moving towards tablets and large screens.
With the minimum width of 200px and a maximum width of 768px we will work around on our navigation toggler. We will implement the right width on our container, margins, paddings and colors.
Then, we will simply change the font-sizes of our header main title on smaller screens to make them look good on tablet’s viewport.
/*********************************************/
/* RESPONSIVE CSS "/
/*********************************************/
@media (min-width: 200px) and (max-width: 768px) {
.navbar-kleo {
background-color: #ffffff !important;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
margin-top: 0px;
color: #ffffff !important;
}
.navbar-toggler {
margin-bottom: 0px;
font-size: 24px;
margin-top: 0px;
color: #343a40;
}
.navbar-kleo .navbar-nav {
margin-top: 0px;
}
.navbar-kleo .navbar-nav li a {
margin: 0px;
-webkit-transition: all 0.4s;
transition: all 0.4s;
color: #9b9bae !important;
}
.navbar-kleo>.container {
width: 90%;
}
.navbar-collapse {
padding: 0 20px;
}
.navbar-kleo .navbar-nav li.active a {
border-color: transparent;
}
.navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .navbar-nav li a:active {
color: #6C55A3 !important;
}
}
@media (max-width: 425px) {
.header-bg .main-title {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.header-bg {
padding: 120px 0;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.header-bg {
background: none !important;
}
}
Now that we place all of our CSS in place, our Bootstrap theme will look something like this at this moment of time:
You will also notice that some features like the scrolling effect, carousel and the mobile navigation don’t work out yet because we haven’t placed our jQuery codes. Let’s do that next.
Adding jQuery codes
Now it’s time to put some jQuery codes on our theme’s script.js file in order to make some features work. We will simply start by calling out our document ready function. Basically, a web page can’t be manipulated without the document is ready. jQuery detects the readiness state of a webpage. The code $( document ).ready() will run once the page Document Object Model (DOM) is ready for JavaScript code to run. Let’s add the following codes:
$( document ).ready(function() {
});
A sticky or fixed navbar is basically a component menu where the component itself is locked or fixed at the top of the header section while the user scrolls down the page. In order to implement this, we will add the following code inside the ready function above.
$(window).scroll(function() {
var startPx = $(window).scrollTop();
startPx >= 50 ? $(".normal-nav").addClass("sticky-nav") : $(".normal-nav").removeClass("sticky-nav");
});
Our code will run whenever the window scrolls with the starting point of the current scroll position via var startPoint = $(window).scrollTop(); On this code, we also need to check if the position is greater than or equal to 50 pixels. If it’s above or equal to 50 pixels we will add the class sticky-nav. Otherwise, we will remove the class sticky-nav.
Try scrolling a bit from the top of the page down before the hero/header ends and you’ll see the navbar sticking up to the top part of the theme.
Scrolling effect and Scrollspy jQuery Plugin
For this part, we have two goals in mind for our theme: first, we will implement the animation of scrolling, then we will apply the scrollspy jQuery plugin effect to automatically update links in a navigation list based on scroll position.
// SCROLL TO DIV
$('.nav-item a, .mouse-down a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1700, 'easeInOutQuint');
event.preventDefault();
});
// SCROLLSPY
$(".navbar-nav").scrollspy({
offset: 90
});
Our code assigned the anonymous click event handler to anchor elements containing nav-item or mouse-down class and then we created a jQuery object of the clicked element via $anchor variable. The rest of the code will stop the currently running animation on the HTML and body elements or start a new animation. It also includes the animation attributes via animation function.
The second part of our code will simply call the jQuery scrollspy function to initiate the scrollspy effect automatically update links in a navigation list based on scroll position
Accomplished Projects Counter
Finally, we’re going to add our theme’s code for the accomplished projects counter. This will simply add a smooth counter effect from zero value to the specified counter attribute value with its identified animation attributes and duration.
// COUNTER
var initial = 0;
$(window).scroll(function() {
var msTop = $('#accomplished-counter').offset().top - window.innerHeight;
if (initial == 0 && $(window).scrollTop() > msTop) {
$('.accomplished-counter-value').each(function() {
var $this = $(this),
countData = $this.attr('counter');
$({
countNo: $this.text()
}).animate({
countNo: countData
},
{
easing: 'linear',
duration: 2300,
step: function() {
$this.text(Math.floor(this.countNo));
},
complete: function() {
$this.text(this.countNo);
}
});
});
initial = 1;
}
});
Now our project is complete. You can now try to scroll and watch all animation occurring on our bootstrap theme created.
You can check the demo here.
Conclusion
Bootstrap has been a great tool for web designers and developers to easily prototype a website rapidly without compromising the quality. The design possibilities are limitless to your imagination and there is a big community of developers who have used it for a long time that can help you whenever you run into some issues with the markup or CSS.
Try using this design on your next website template. Feel free to customize it to your liking. Be creative. Who knows you might be ending up creating a much better design for your website theme.
