Theme Design

Bootstrap Theme Designing Trick

Let’s begin the theme design. Start with the basic template code copy to basic template code into your file and save as index.html for the whole theme preview. Together with don’t make a mistake to save the index.html file to out of a bootstrap folder. Otherwise, the index.html file will not work. This is the example of the basic template code.


Basic template code is available in Bootstrap’s official site ( While you copy and save your file, you can run index.html code file in your browser. “Hello, world” will appear in your browser. because of in this template Only link bootstrap.min.css, jquery.min.js and bootstrap.min.js file and HTML heading tag.

The First Step Start With The Navbar In Your Bootstrap Theme

Now go to the bootstrap site link ( scroll down you can see right-hand sidebar navbar tab in your browser.

Theme design

Click over navbar button, and you will see there is a lot of examples of navigations copy one of code and paste hit the save button for saving your index.html file. While the index.html file is saved, refresh your browser navigation will appear you can modify it according to your requirement. It’s responsive navbar.

Bootstrap theme design

Let’s Go Ahead Make Slider

you have to go to ( on this link bootstrap javascript menu and find the carousel.js. There is a lot of sliders examples copy one of carousel code and paste where a navbar tag is closed together with save it and refresh your browser while you refresh it your carousel (slider) looks a little bit messy.

bootstrap theme design

Go to your theme folder make a new folder like image folder and make few images for the slider. Images size should be (1366px by 400px) 1366px is horizon and 400px is vertical you can increase image vertical according to your requirement save images in theme image folder and give <img> tag to right path like.

Bootstrap design

Refresh browser your carousel will be run like the ocean.

Bootstrap theme design

 In next tutorial, I will tell you how to make jquery light box and footer. 
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge