a blog for those who code

Thursday 11 June 2015

Getting Started with BootStrap


In this post we are going to discuss about Bootstrap. Bootstrap is an open-source framework for developing responsive, mobile-first websites.  It is actually a powerful front-end framework, which includes HTML and CSS based design templates for UI components like buttons, drop-downs, tabs, accordion, etc.


Bootstrap is built using Less, it is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, them-able and extendable. But you do not have to be familiar with Less to learn Bootstrap, however Less can make customizing sites earlier. You can even use Visual Studio that offers intellisense for development with Bootstrap.

PC : http://getbootstrap.com/

Advantages of Using Bootstrap

1. Free Set of Tools - Bootstrap has a lot of free set of tools for creating flexible and responsive web layouts as well as common interface components.
2. Open Source - It is completely free to download and use
3. Responsive features - You can create responsive designs using Bootstrap. It adjusts itself to all kinds of Desktops, Tablets and Mobiles.
4. Browser Support - It is supported by all the known browsers.
5. Easy to Use and Saves lots of time - Bootstrap is very easy to use and you can save lots of time and efforts using the Bootstrap predefined design templates. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap.

PC : http://getbootstrap.com/getting-started/#support-browsers

Example : First Web Page With Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <title> First BootStrap Example </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h1> Hello BootStrap </h1>
        <p> Hello From CodingDefined </p>
    </div>
</body>

Try It Yourself 

Bootstrap uses HTML elements and CSS properties that require the HTML doctype (<!DOCTYPE html>). Now to make it as a mobile friendly you need to add one more line to your code as <meta name="viewport" content="width=device-width,initial-scale=1"> This will ensure proper rendering and touch zooming. Then we have added a container class which will bind the elements inside the content.


The greatest advantage of working with bootstrap is its community. You can get a number of free themes for Bootstrap in the internet. One of such location is Bootswatch, here you can get numbers of bootstrap themes for free. In our next post we will go through some of the common bootstrap classes.

Please Like and Share the Blog, if you find it interesting and helpful.

1 comment:

  1. I had heard of but never used Bootstrap, I would like to learn more about it.

    ReplyDelete