How to Create a Custom Bootstrap Theme from Scratch – Designmodo

• 10 minutes READ
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.
Looking for a Bootstrap online builder?
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.
More about Bootstrap:
With Postcards 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.
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:
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
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.
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:
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.
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.
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.
Note: All illustration images came from Freepik.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Now that we place all of our CSS in place, our Bootstrap theme will look something like this at this moment of time:

Bootstrap Website with CSS


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.
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:
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.
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.
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.
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
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.
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.
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.
Sam is a web designer and a front web developer with over 5 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics.
We create beautiful website and email builders, helping 30,000 customers to grow their business.
A simple tool to create emails and newsletters.
Create an animated website in minutes.
A perfect tool to create Bootstrap website.
Earn 25% commission on affiliate sales. We have everything you need to make money.
Our useful services seamlessly integrated with each other and our products to get you to the finish line faster.
Drag-n-drop solution for your static website to quickly host your static website.
Design in the cloud and create new websites seamlessly, without any coding skills.
Talk to your audience at scale. Send your email marketing campaign quickly and easily.
Get website downtime alerts by phone call, SMS, email, Slack, etc when your website went down.
Whether you’re an experienced web designer, developer, marketer, or a newbie looking to learn the basics, there’s something for everyone on this blog.
28 articles
13 articles
32 articles
47 articles
21 articles
23 articles
5 articles
4 articles
23 articles
80 articles
18 articles
91 articles
87 articles
24 articles
9 articles
18 articles
122 articles
24 articles
18 articles
7 articles
17 articles
8 articles
92 articles
10 articles
11 articles
4 articles
16 articles
22 articles
We’re always looking for new authors. We’re happy to publish useful articles and tutorials related to web design.
Made by Designmodo.
This website design and code was built using our tools. Treat it as a proof of concept.
Subscribe now to receive discounts, news, and updates. We pinky swear to not spam you. 😉
Copyright © 2010-2022. All Rights Reserved
We use cookies to ensure that we give you the best experience on our website. Privacy Statement.
Your cart is empty 🙀
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
Create an amazing static website in minutes and export ready-to-use template.

source

Hire me on the World’s Leading Online Marketplace Freelancer.com to design your website. Additional services like- graphic design, virtual assistance, SEO, Data entry, etc are available. Click on This Link to start your project

Write a comment