Bootstrap Overview

What is Bootstrap Overview?

Bootstrap is one of the best mobile first-end frameworks which are used for web development and it makes the process of web development much faster and much easier. It is very intuitive and very powerful framework and it uses HTML, CSS and JavaScript for functioning. The development of bootstrap was done at Twitter and by two people whose names are Mark Otto and Jacob Thornton. It was released first in the year 2011 on the month of August as an open source product.

Example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <header class="well">
        <h1 class="text-center">Wel come to Center Point Tutorials.</h1>
        <p class="text-center text-success">This is the example of Grid System.</p>
    </header>
    <main class="row well">
        <h1 class="text-success">For Desktop Mode</h1>
        <div class="col-lg-4">
            <h2 class="text-primary">First Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-lg-4">
            <h2 class="text-primary">Second Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-lg-4">
            <h2 class="text-primary">Third Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
    </main>
    <main class="row well">
        <h1 class="text-success">For Tablet Mode</h1>
        <div class="col-md-3">
            <h2 class="text-primary">First Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-md-3">
            <h2 class="text-primary">Second Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-md-3">
            <h2 class="text-primary">Third Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-md-3">
            <h2 class="text-primary">Fourth Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
    </main>
    <main class="row well">
        <h1 class="text-success">For Mobile Mode</h1>
        <div class="col-sm-6">
            <h2 class="text-primary">First Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-sm-6">
            <h2 class="text-primary">Second Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-sm-6">
            <h2 class="text-primary">Third Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-sm-6">
            <h2 class="text-primary">Fourth Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
    </main>
    <main class="row well">
        <h1 class="text-success">For Extra Small Screen Mode</h1>
        <div class="col-xs-12">
            <h2 class="text-primary">First Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
        <div class="col-xs-12">
            <h2 class="text-primary">Second Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
        </div>
    </main>
</div>
<!-----**---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>