BootstrapSam Norton • January 20, 2023 • 10 minute READ
Bootstrap, the world’s most popular front-end framework, makes it easy for web designers and developers to Quickly generate creative website themes. So, let’s build a Bootstrap website that works on modern web browsers and different viewports such as large screens and mobile devices.
Looking for an online Bootstrap builder?
- 👉 Try our Bootstrap Builder and create unlimited projects for unlimited clients.
- 👉 Start building a website using our Bootstrap Templates.
Bootstrap provides useful information on ways to solve different challenges in 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. It confidently offers ready-to-use solutions along with the other third-party modules that you can integrate without worrying about support, as it has a large community of developers ready to help you in case you run into any issues.
While there are many online and offline bootstrap builders you can use to quickly prototype your website, Bootstrap makes it easy for you to control almost every part of your website design and template layouts. is it a simple blog or a large company e-commerce website.
Slides: HTML Static Website Builder
Today, I’m going to show you how you can create a Bootstrap theme from scratch in minutes.
Learn more about Bootstrap:
- Bootstrap Columns
- Bootstrap Carousel
- Bootstrap Buttons
- Bootstrap Grid
- Bootstrap Modal
- Bootstrap Navbar
- Bootstrap Flexbox
Theme Settings Bootstrap Theme
Before we start coding the Bootstrap theme, let’s first build its wireframe. I’m using Mockflow for the wireframe of our bootstrap theme. Technically, our schematic will include the following components:
- Navigation
- Hero/Headline Section
- About Us Section
- Services Section
- Desk section
- Testimonials section
- Contact section
- Footer
File Structure
After designing our layout in Mockflow, it’s time to first create the necessary files and folders before getting into the basic theme markup. We need to create the following files and folders following this layout:
root/ |—css/ |——custom.css |—webfonts/ |—images/ |—js/ |——script.js |— index.html
Downloading the Bootstrap 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 for any theme. Within the download source files, we need to copy bootstrap.min.css to our CSS folder. We also need to copy bootstrap.min.js and bootstrap.bundle.min.js into our JavaScript folder.
Downloading required third-party jQuery plugins from a template
After downloading the Bootstrap source files, we also need to download the necessary third-party jQuery/JavaScript files that we will use in our Bootstrap theme. First, let’s start with jQuery. Go to the jQuery download page and download the latest zipped version minified 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 Scrollspy. Place the scrollspy.min.js file in our JavaScript folder.
After downloading all these files, we will have the following jQuery/JavaScript files inside our JavaScript folder:
- package.min.js
- easing.min.js
- min.js
- js
- min .js
Font Awesome Download
The process of creating a theme requires downloading the Font Awesome source files via its download page so we can add icons to our project. Once downloaded, copy the webfonts folder inside our root folder and the all.css file to our CSS folder.
Images
I already set all the images we need for this custom theme. You can download them here and place these images inside the theme’s images folder.
Note: All illustration images come from Freepik.
Basic markup for creating a Bootstrap theme
After downloading all the files needed for our project , now it’s time to set up the basic starter html tags along with links to our CSS and jQuery/JavaScript files. Inside the index.html file, we must add the following codes:
Navbar
After creating the basic Bootstrap theme markup, let’s work on the navigation bar section in the same file. The navigation bar is a responsive component of a website that serves as the navigation scheme and collapses or can be toggled in the mobile viewport that transforms into a horizontal format as the width of the available viewport increases. We’ll add bootstrap nav flags and then add the normal-nav class which we’ll use later to transform the navbar into a sticky navbar, a sticky navbar. at the top of the header section as the user scrolls. We will use the anchor tags to seamlessly navigate the website through each section’s website id using jQuery and automatically update the links in the navigation list based on scroll position via the Scrollspy jQuery plugin.
Hero/Header Section
Next, let’s create our hero/header section. Usually this is a giant component, but this time we won’t be using this bootstrap component, but a normal section markup that has all the necessary bootstrap and custom classes to make it look good later in our theme’s CSS. We need to add the top id in our section tag so that we can scroll to the top in this part of our website as we add the necessary jQuery codes for this more forward.
Bootstrap Theme
Creating a Bootstrap theme from scratch
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.
About Us Section
Now our Bootstrap template needs an about us section, this will be a single column for the title and a two column section where we will include our dummy text in the second column and an image in the first column that came from Freepik. Finally, we’ll put the about id in our section tag for our jQuery navigation scroll function later.
About us
Ut enim ad minim veniam, quis nostrud exercitation ullamco labo ris nisi ut aliquip ex ea commodo consequat.
A perfect starter theme for all kinds of businesses.
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.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Services Section
Next, the template needs a services section. For this part of our theme, we’ll be using 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’ll also include the services id in our section tag for our navigation scroll function later in our jQuery tags.
Our services
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Web Design
Lorem ipsum dolor sit amet, consectetur adip iscing 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.
Application development
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.
Mobile development
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.
Completed Projects Counter Section
Now that we have In the services section setup, we’ll add a four-layout grid completed project section using awesome icons that we’ll animate later via jQuery.
bg”>
0+
Websites
0 +
Applications
0
Mobile apps
0
Customers
Section of testimonials os
Next, we’ll integrate the bootstrap carousel feature into the testimonials section of our theme. If you’re not familiar with carousels, it’s simply a slideshow component that loops through the elements using various media elements such as images, slides, or text, just like a normal spinning carousel at a carnival.
We’ll use bootstrap the carousel components to cycle through the avatar, testimonials and names of our fictitious client. We’ll also put the testimonials id in our section tag for scrolling navigation later.
Testimonials
Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat.
“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.”
Kit Johnson, Account Analyst
“Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. power suspension. Aliquam sit amet gravida nibh, facilisis gravida hate.”
Rick Gomez, App Developer
“Phasellus vitae suscipit fair. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis en accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.”
Chris Smith, CEO, ProTools
Contact Section
Creating our Bootstrap template involves a contact section.The contact section is one of the most valuable parts of a website, which is often the starting point for a new visitor on a mission.In this part of our theme, we are going to add a grid of columns for our title and another two column layout grid for the contact’s internal content.The first column of the two layout grid will have the information from c ontact and the second column will contain a contact form that users can use to send us a message. W We also need to include the contact ID in the section tag so the navigation will have a smooth scrolling effect later when we add our jQuery tags.
Contact
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Connect
Lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
659-888-5495
+1-689-888-5495
200 Lexington Ave, New York, NY 10016, USA
Footer
Finally, we’ll add a footer section mark at the bottom of our Bootstrap theme . This will simply have a copyright symbol and the year the theme was created.
After adding all our markup, the template will look like this now . Don’t worry if it looks like a skeleton theme. We’ll put in some CSS using our custom .css in the next part of the tutorial.
Adding the Stylesheet
To put some magic in our markup, we’ll now add our CSS for each section of our Bootstrap theme inside the custom.css file.
General CSS
Before we continue, we need to add our general CSS. These are CSS codes that will simply format our basic markup, such as the font we will use throughout our theme, the initial font size, and the background.
/************ ** ********************************/ /* GENERAL CSS “/ /******** *** ********************************/ @import url(“https://fonts.googleapis body { font family fonts: “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; }
CSS Utility
Next, we’ll add our utility CSS These CSS tags will include many classes available to do little unique things, like classes for a specific font size, colors, backgrounds, and classes to set specific layout properties.
/****** ** ************************************/ /* CSS UTILITY “/ /**** ************************* ************/ .text-sub {color: #9b9bae !important; } .bg-grey { background color: #F8F6FA !important; } .title { color: #343a40; } .header-colorize { font-weight: 700; colour: #6C55A3; } .section { padding: 120px 0px 120px 0px; relative position; } .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-shadow-box: 0 1px 2px rgba(122, 96, 183, 0.5); boxshadow: 0 1px 2px rgba(122, 96, 183, 0.5); colour: #6c55a3; border-radius: 13px; screen: online block; padding: .25em .4em; font weight: 700; line height: 1; text alignment: center; whitespace: nowrap; vertical alignment: baseline; edge-radius: .25rem; transition: color .15s smooth in and out, background color .15s smooth in and out, border color .15s smooth in and out, box shading .15s smooth in and out; } .header-bg { padding: 170px 0 140px; background image: url(‘../images/header-background.png’); background size: cover; background repeat: no repeat; background position: bottom left; } .header-bg .header-small-title { letter spacing: 2px; } .header-bg .main-title { font-size: 2.8rem; line height: 1.35; colour: #6C55A3; }
Navbar CSS
The basic Bootstrap navbar layout contains the generic layout of a navbar. In this part of our stylesheet, we’re going to customize the look of our navigation bar to make it completely different, matching our theme’s design. We’ll start by designing our link elements, logo and moving towards designing the toggle effect.
/**************************** * ********************/ /* NAVBAR CSS “/ /******************** * ********************/ .nav-item .nav-link {text-decoration: none; display: inline-block; color: #343a40; } .navbar-kleo { margin-bottom: 0px; -webkit-transition: all 0.5s in and out; transition: all 0.5s in and 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 transparent solid; 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; top margin: 5px; bottom margin: 0px; colour: #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-shadow-box: 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; }
CSS Buttons
Bootstrap by default provides different styles of buttons with generic layout. For this section, we are going to customize the background, color, and font of our launch button. We will be working specifically on the main launch button size as we won’t be using the other form of launch buttons in our theme.
/******************** * ************************/ /* CSS BUTTONS “/ /**************** * ****************************/ .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.a ctive { background color: #53407f !important; border: 1px solid #53407f !important; -webkit-shadow-box: 0 3px 10px rgba(94, 98, 255, 0.5); boxshadow: 0 3px 10px rgba(94, 98, 255, 0.5); color: #ffffff !important; }
Services Section CSS
Now that we’re done removing our custom CSS, let’s move on to the Services section and add some customization. Basically, the following CSS codes will simply set some properties on the font-awesome icons, like the background, size, and border that we used in our markup above.
/************** ********************************/ /* CSS SERVICES “/ /********* * ************************************/ .services-container .services-icon { height: 72px; width : 72px; background: rgba(108, 85, 163, 0.08); font-size: 30px; screen: block inline; 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; }
CSS Done Counter Section
Now it’s time to put in some CSS for our Done Counter section, we’ll put each grid element in a border box which we then animate the content within each box. via jQuery.
/**************************************************** **** *****************/ /* COUNTER OF PROJECTS DONE CSS “/ /************ ****** **************************************************** **/ .counter-icon-done { font-size: 52px; } .counter-done-bg .counter-done-box { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.5); } .achieved-achieved-against-bg { background: #6C55A3; } .counter-done-bg .counter-done-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, like any front-end framework, gives forms some basic styling to improve the design and user experience while using them, but we’re going to customize it a bit, especially the outline and font sizes.
/** ********************************************/ / * CSS FORMS “/ /************************************************ */ .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 { size font size: 15px; color: #9b9bae; } .form-control:-ms-input-placeholder { color: #9b9bae; font size: 15px; } .form-control::-ms-input-placeholder { size of font: 15px; color : #9b9bae; } .form-control::placeholder { color: #9b9bae; font-size: 15px; }
CSS Carousel
Now for new In our CSS carousel, we’ll configure each element via the img-box class and give each of them a certain size and border radius. We’ll also style the carousel’s navigation colors and shapes, so that instead of a circular shape, we’ll give it a box-like format.
/**************** *** ****************************/ /* CSS CAROUSEL “/ /************ *** ****************************/ .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; top margin: -20px; above: 50%; background: none; } .carousel-control i { font-size: 68px; line height: 42px; position: absolute; display: online block; color: rgba(0, 0, 0, 0.8); text shadow: 0 3px 3px #e6e6e6, 0 0 0 #000; } .carousel .carousel-indicators { background: -40px; } .carousel-indicators li, .carousel-indicators li.active { width: 21px; height: 0px; margin: 1px 3px; } .carousel-indicators li { background: #999; edge-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); }
Footer CSS
Our footer has a simple design. We’ll just put a padding on top and give our footer text a plain white color.
/************************ ** ********************/ /* FOOTER CSS “/ /******************** ***** ********************/ .footer { background color: #6C55A3; top padding: 20px; } .footer p { color : #fff; }
Responsive CSS
Finally, it’s time to add some responsive CSS to the theme’s stylesheet.We’ll start with mobile devices and move towards tablets and screens first large.
With the minimum width of 200 px and a maximum width of 768 px we will work on our navigation switcher, we will implement the correct width in our container, margins, padding, and colors.
Next, we’ll simply change the font sizes of our header’s main title on smaller screens to look good in the tablet viewport.
/************ * ********************************/ /* RESPONSIBLE CSS “/ /********* ** ************************************/ @media (min-width: 200px) and (max-width: width : 768px) { .navbar-kleo { background color: #ffffff !important; -webkit-shadow-box: 0 3px 10px rgba(0, 0, 0, 0.08); boxshadow: 0 3px 10px rgba(0, 0, 0, 0.08); top margin: 0px; color: #ffffff !important; } .navbar-toggler { bottom margin: 0px; font size: 24px; top margin: 0px; colour: #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’ve got all of our CSS in place, our Bootstrap theme will now look like this:
You’ll also notice that some features like the hover effect, carousel, and mobile navigation don’t work yet because we haven’t put our jQuery code in there. Let’s do it next.
Adding jQuery code
Now it’s time to put some jQuery code in our theme’s script.js file to create some functions . work. We’ll just start by calling our document ready function. Basically, a web page cannot be manipulated without the document being ready. jQuery detects the readiness status of a web page. The $( document ).ready() code will be executed once the Document Object Model (DOM) page is ready for the JavaScript code to execute. Let’s add the following code:
$( document ).ready(function() { });
Transforming the Navbar into a Sticky Navbar
A sticky or sticky navbar is basically a component menu where the component itself is locked or fixed to the top of the header section as the user scrolls down the page. To implement this, we’ll 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 be executed every time the window is scrolled with the start point of the current scroll position via var startPoint = $(window).scrollTop(); In this code , we also need to check if the position is greater than or equal to 50 pixels. If it’s greater than or equal to 50 pixels, we’ll add the sticky-nav class. Otherwise, we’ll remove the sticky-nav class.
Try scrolling down from the top of the page a bit before the hero/header ends and you’ll see that the Navigation bar sticks. to the top of the topic.
Scroll Effect and Scrollspy jQuery Plugin
For this part, we have two goals in mind for our theme: first, we’ll implement the scroll animation, then we’ll 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 the class nav-item or mouse-down and then created a jQuery object of the element in the one clicked via $anchor. The rest of the code will either stop the currently running animation in the HTML and body elements or start a new animation. It also includes the animation attributes via the animation function.
The second part of our code will simply call the jQuery scrollspy function to initiate the scrollspy effect and automatically update the links in a navigation list based on the scroll position
Done Projects Counter
Finally, we’ll add our theme’s code for the done projects counter. This will simply add a smooth counter effect from zero to the value of the specified counter attribute with its identified animation and duration attributes.
// COUNTER var initial = 0; $(window) msTop) { $(‘.counter-value-done’).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. Now you can try to scroll through and see all the animations that occur in our created bootstrap theme.
You can check out the demo here.
Conclusion
Bootstrap It has been an excellent tool for web designers and developers to easily prototype a website quickly without compromising on quality. The design possibilities are limitless to your imagination and there is a large community of developers that have used it for a long time and can help you whenever you have problems with 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 end up creating a much better design for your website theme.
.