Bootstrap – The most popular HTML, CSS and JavaScript framework

by admin

Posted on 08/23/17 1:29 PM

If you are a techie or you’re keen learning web development, then at some point, you’ve heard of ‘Bootstrap’. Whether I’m right or wrong, but, this post is specially designed for all folks who want to get a quick dive into the flawless world of Twitter Bootstrap.

A brief unfolding…

Originally developed by Mark Otto and Jacob Thornton at Twitter, Bootstrap was released as an open source product in August 2011. It is a free front-end framework which gives you responsibility for creating clean and organized responsive designs.

Quick facts…

➨ Bootstrap is free to download and use.

➨ It provides fast and easier development.

➨ It includes Html & Css based design templates.

➨ It can make use of Javascript plug-ins.

➨ Most important, It facilitates responsive development.

Why to use…

Make use of Bootstrap for followng reasons:

  • For letting your website adapt to various screen devices

  • For adding consistency to design and code

  • For quickly & easily prototyping new designs

  • For ensuring cross-browser compatability

And, anybody having basic knowledge of HTML and CSS can use Bootstrap.

What does responsive means…

Something can be called responsive if it typically adjusts itself to look good on all screen devices. For more in-depths, check out our previous blog post – ‘Responsive Web Designing’.

From where you can get Bootstrap…

You can start using Boostrap in two ways –

  • Download it from getbootstrap.com

  • Include bootstrap from CDN

What does Boostrap package contains…

  • Grid systems, link styles and background

  • Global css settings, Html element style, advanced grid system

  • Reusable components such as dropdowns, navigations, pop-overs, alerts, etc.

  • Lot of custom Jquery plugins.

  • And, you can typically customize everything in bootstrap to get your own style.

First Bootstrap example…

<!DOCTYPE html>

<html lang=”en”>

<head>

<title>First Bootstrap example</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>

</head>

<body>

<div class=”container”>

<h1> First web page</h1>

</div>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

</body>

</html>

There are vast number of things to study in Bootstrap. You can follow the links here:

https://getbootstrap.com/

https://www.w3schools.com/bootstrap/default.asp

Out of all, Grid is the most important Bootstrap feature that we’ll take into account here. So, what are grids actually?

The grid system of bootstrap adds up to 12 columns. You can use them individually or group together as one single unit. (to form wider column)

Bootstrap’s Grid System has four main classes:

  • xs for phones

  • sm for tablets

  • md for desktop

  • lg for large desktops

All these classes combine together to form much complex and flexible layouts. Let’s run down to understand the basic structure of Bootstrap grid system:

<div class=”row”>

<div class=”col-*-*”></div>

</div>

<div class=”row”>

<div class=”col-*-*”></div>

<div class=”col-*-*”></div>

</div>

<div class=”row”>

…

</div>

So, Thast’s all about the Grid System.

Wrapping Up…

Now, you must have gone a quick look of what Bootstrap is all about. It is easy to understand, reliable to implement and fast to customize. You can extensively use it to build and maintain your websites – responsive ready, browser friendly and completely free of cost. Looking forward to meet you with my another blog post. Till then, sayonara. 🙂

Leave a Reply

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

Categories