:::: MENU ::::

How Fast You Can Strap With Bootstrap

How Fast You Can Strap With Bootstrap

How Fast You Can Strap With Bootstrap Demo


Many of us struggle to get a decent responsive layout when it comes to web development. Sometimes we miss out the power of frameworks due to lack of knowledge or probably because of our laziness. Bootstrap 3 is the most famous, rather simple mobile-first CSS framework that can cut down your design development time to half or more.

Why Exactly We Need Bootstrap

Most of the times our clients need their site up and running within a week or so. In that case we, web developers find ourselves ready with the entire code setup but the only thing that stops us from getting the bucks is front-end design. Front-end responsive layout generally takes a lot of time when it comes to web-developer. Bootstrap 3 might be the savior for them who doesn’t want to dip their heads down into CSS3’s complex media queries.

Bootstrap doesn’t require any prior experience on HTML and CSS, it only needs some HTML as per its specifications. It has a CSS stylesheet and all the javascript lookups in built. So if we use proper HTML, our website will be ready within hours.

Lets Dive in

Currently you can download Bootstrap v3.1.1 from here. After unzipping it you will get three folders inside, named css, fonts and js. The css folder includes four CSS files: bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css. We will be using bootstrap.min.css in our application.

How Fast You Can Strap With Bootstrap

Bootstrap 3 uses font files instead of flat images to showcase its image icons. This helps speeding up the website while saving bandwidth. These font icons are called Glyphicons, the company which actually named the same, gave those icons for free.

Bootstrap’s main JavaScript libraries for things like carousels, drop down menus, search auto suggest and many other powerful functionalities are kept right here inside js folder. We will use the minified version.

The Structure

Today, we are going to build a static landing page using Bootstrap 3. We can name it as “GreenStrive” which is highly influenced by CodeStrive.

How Fast You Can Strap With Bootstrap

Basic Html Setup

To activate the Bootstrap framework, we need to include all the appropriate files and follow a proper HTML structure. Here, we will build the structure first and then see which files are required.

The Markup

Here its pretty same that we generally do for HTML5 development. We will be using custom.css for our development where we will import bootstrap.min.css and then we’ll override some of its behavior. All our components will sit inside the container block.

Create A Menu

Responsive menu creation is very easy in Bootstrap 3. All the styling stuff is already there with the framework, we only need the proper markup for us. Inside our container we will place below markup.

The Markup

Let’s understand what each element and its class is doing. navbar class, as the name suggests, is the wrapper to the menu items. navbar-default gives the background color to the menu and also applies a border to it.

We have few more classes for different behavior of navbar like, navbar-fixed-top (helps to make the menu bar fixed at the top of the page even if we are scrolling), .navbar-static-top (helps to make the menu bar stay at the top of the page).

The container-fluid div makes sure that your content is aligned and responsive, with a decent margin from each side of the webpage and is also centered on the browser screen. The navbar-header div is used for branding purposes. We have added a link with the class navbar-brand to display the name of the website.
We have a button also for navigation-toggle for smaller devices. Bootstrap will display it only when its needed.

Now add the following code outside the navbar-header div.

The Markup

The above code is the actual content of our menu. navbar-collapse is applied to make the menu touch-compatible and also to change its form for smaller devices. The contents inside are pretty easy to understand. We have used basic ul and li tags for listing menu items. There’s also another ul that is classed navbar-right for pulling it to the right of the navigation bar. We have a drop down menu inside the navigation too. You can find span elements having a class name glyphicon. Those will allow us to have specific icons along with the elements.

The classes used for displaying particular kinds of elements in Bootstrap 3 are Important. You can also check out their documentation, which is actually required to understand the framework better.

We will change the header color and styles very soon to make it different from the default one but for now we will stick to structure building first. Let’s move on to get the rest of the body parts.

Banner Area

Bootstrap 3 gives a highly usable class called jumbotron that is very useful for displaying large banners and contents. For that, we need to add the following markup.

The Markup

Inside .jumbotron, we have placed a h1 tag, a p tag and a call for action button. We will change the banner background a little later.

The Main Content

Now to divide the content area into three equal areas we will use Bootstrap’s grid system.

Bootstrap is a 12 grid system. It divides the screen into 12 equal parts and we need to specify which HTML element occupies which parts of the grid. So in short any element will occupy a minimum of one grid in the grid system.
Let’s see the markup first.

The Markup

Firstly, we are using a row element here. In our case, there are three div elements that are contained inside a single row.

The row has three more div tags with the class col-lg-4. The number 4 in the class tells us that it occupies four grids. So three sibling divs with four grids each will occupy 12 grids, which is perfectly fine and necessary too.

Make sure you are not specifying more than 12 grids in a single row else your design will break down. Next, the col-lg-* tells us that in the large screened devices (≥1200px), the siblings will be placed side to each other while in smaller devices they’ll stack on top of one another.

You can use col-md-* for getting left floated content in tablet like devices also which are (≥992px). There are classes for small screen (col-sm-*) and extra small screen (col-xs-*) too. I hope you have now basic understanding of Bootstrap’s grid system.

In content section we have h2 tags having the sub headings. The deriptscriptions are contained inside p tags. Also we have links with btn-primary class for getting call for action buttons. For coloring text or buttons we have several class in the API. We are using text-warning for example. For buttons we are using button-primary with nice blue background.

Other button classes like btn-success is used to make it look green in color. There are other classes as well, like btn-info, btn-default, btn-warning and btn-danger. Please go and check the documentation for your reference to get all the other possibilities.

The Footer

Our footer is the most simple one for sure. We have p tag for our copyright inside.

The Markup

Now the default theme is ready in front of us. We’re gonna tweak the look for our need because thats very important when we use any framework. You don’t wanna make the same website like thousands of other websites.

The Theme Changer

For our theme, the base color will be Green. So we will change some of the main portion’s background color. We don’t wanna go for the default fonts all over, so we will take some google fonts and implement them in our template. We can stick the next code block just after the base bootstrap.min.css import. Very quickly take a look at what we are doing here.

The Stylesheet

Here we are changing the header and the banner area mainly. If you understood the styling already, you can change the color behavior as you wish. You can quickly inspect with firebug and change the default nature as per your need.

Thats it for the first take. You can go beyond this because the Bootstrap framework has lot of other features out of the box.


For glyphicon images to come properly with text, you should give blank space before the text. For a good banner image, I generally go with 1600X430px size. That will go well with all the devices.


You can have a look at How Fast You Can Strap With Bootstrap Demo here. We have a Download option also so that you can keep a working copy in your machine. I hope I was useful for you and the Bootstrap framework might got your kind attention.

Bootstrap is definitely the css framework that I will use in future, what you’re gonna use?

Indrajit Das
Follow me

Indrajit Das

Co-founder of CodeStrive [ Kind of a seeker for new dimensions in WEB world, sort of a Thinker, Blogger, Die-Hard Coder, Wash-Room Singer, Football Player, Gamer, Guitar Player, Cartoonist and the list goes on.. ]
Indrajit Das
Follow me

Latest posts by Indrajit Das (see all)

How To Make Responsive Layouts With HTML5/CSS3
A Kick Start With Require.js
Pride that quarells at self-breath