Create Bootstrap Template in 10 StepsDecember 28, 2015December 29, 2015admin
bootstrap basic template design

Bootstrap (Responsive Web Template) Template creation with simple 10 steps, first let us have quick intro about Twitter Bootstrap Responsive front end frame-work, as you all know bootstrap developed by leading micro-blogging site Twitter.

 

Bootstrap is specially designed for Responsive websites, to develop bootstrap responsive frame used technologies like html and html5, css and Saas, Less, also jquery. Main with using Bootstrap frame you can develop light weighted and user-friendly Responsive web template also mobile friendly web apps. This really simple front framework anyone can Learn who have basic idea about web technologies(html, css, jquery), by following the below 10 steps you will be going to create responsive template (Read+Practice=Implement).

 Step1 – Download Bootstrap Basic Setup

This is a main step and first step, Basic bootstrap setup needs to be done before you starting any implementing any template by using bootstrap, first create index.html files to create a basic setup. download complete package frame bootstrap.com website, include all files in index files like please refer below index.html file code, so that you would get idea of basic setup. check the below structure of the bootstrap package files.

Step 2- Include bootstrap files

In the above we have folder structure(tree view), so based on that you will have to include required (files paths) files in the index.html file, than only bootstrap frame-work will work and conceded as a bootstrap template also responsiveness will apply for your template. please look at below sample code about how to include bootstrap files and observe the paths.

Step 3 – Bootstrap CDN Files

There is another way to include files to index.html files. that is called CDN(Content Network Delivery Links). instead of downloading complete package from Bootstrap website (official website), just by including CDN links, like below you can make it work, the main difference is, files path will contain with others domain names, to get more details and to understand check the below code.

Step 4 – Basic Template Structure

Mostly, to create basic template what types of sections we need, let me clarify on this, this is the main core part and important step in 10 steps, so to create basic html template we need some sections which is different parts of web template. here you see the below sections with basic demo with titles.

The below demo have some division of web template, some thing like branding(logo), navigation(menu), slide area, left list, main content section and footer. will see more about respective sections in the further steps.

 Branding

Navigation

Slide or Banner Area

Left  Section

Main Content Section

Footer Section

Step 5 – Bootstrap first class

In this step we have a container bootstrap class, container is first and main class. all other section classes and element will come inside of this. container class is used to gather all element in the order.

Step 6 – Bootstrap logo and navigation(web menu)

Logo and Navigation mostly common must required section for any template. so here we have created setup code box, navbar-header class is to create branding (logo place) place for template, after that we have another section navigation id, navbar is the main id and also another important class nav navbar-nav which is having inside the ul tags. also we have active class to activate first list tag, li tags having menu items(Home, About, Contact and more).

Step 7 – Bootstrap Slider

Bootstrap slider will come after logo and navigation in the order. and this a most promising place to promote your business or your services in the entire website, bootstrap slider will give you a option to include content and headings for the each slide. Also you can give a different link for each slider. click here  to read more about bootstrap carousel slider. you have bootstrap slider code in the below, follow and learn also implement in your own template.

Step 8 Bootstrap Listing

Listing means nothing but sublinks in portal, with using bootstrap we can create sublinks, here we have example code with some list values so that you will get clear picture on this. have a look into demo in the below which is continuing with some values. in the example, we have two important classes like nav nav-list and nav-header also active class.

Logo Home About Us Profile Services Contact Us
bootstrap tutorials
Bootstrap List
Bootstrap Basics
Bootstrap Navigation
Bootstrap Banner area
Bootstrap Side Listing
Main Content

Bootstrap test Content area

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

All Rights Reserved. © to us tutorials 2014.Valid XHTML 1.0 Transitional

Step 9- Bootstrap Grid Columns

Griding concept is the core section in bootstrap frame-work, grid columns will allow us to include different section in different along with responsive, for content based websites, the most preferred way is bootstrap grid system, in the perspective of bootstrap we have some demos which is differentiate the each one, in the first table we have 3 columns with different columns(.col-md-5, .col-md-2, col-md-5), and in the second demo we have only two columns with two different classes(col-xs.col-lg-4 and .col-xs-12.col-sm-6.col-lg-8) this for all devices. and last in the list, we have three columns demo with classes of col-md-5. col-md-2.col-md5.

The Bootstrap grid system has 4 types of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). by using this clasess you can create you own dynamic and flxible layouts.

.col-md-5 .col-md-2 .col-md-5
.col-xs-6 .col-lg-4 .col-xs-12 .col-sm-6 .col-lg-8
.col-md-5 .col-md-2 .col-md-5

Step 10 – Bootstrap Buttons

Bootstrap buttons are classy and rich interface buttons, in bootstrap provides seven types buttons with different colors(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link)

and sizes(.btn-lg, .btn-md, .btn-sm, .btn-xs). styles can be applyed to <a> and <input> also for <button> tags. yo can see examples in the below image.

bootstrap button styles

bootstrap button styles

bootstrap basic template design

bootstrap basic template design

conclusion

We hope, your doing well… this complete article about how to create basic template in bootstrap, to read more about bootstrap please click here, if you want to share some valuable things or any advice please post in comment section, will contact you back through mail.