a blog for those who code

Thursday, 18 June 2015

Little about BootStrap Classes

In this post we will go through some of the common bootstrap classes. In our previous post we have gone through Getting Started with Bootstrap, where we have created our first web page with Bootstrap. Everything you want to add onto a page by using Bootstrap is done by adding classes and HTML to the page. There are numerous Bootstrap classes.


In simple terms you can call different components of Bootstrap by adding different classes. Let us go through 3 common bootstrap classes.

container : The container class places content inside a horizontal container. The size of the container will vary based on screen-size. Simply it will create a "fixed width" container.

container-fluid : The container-fluid class also places content inside of a container but the difference between container and container-fluid is that container-fluid always takes the width of the screen. It will always take the width of the browser.

jumbotron : The jumbotron class is for displaying titles for different sections of a website. It has a highlighted background and an increased font-size.

Example - Difference Between container and container-fluid and usage jumbotron

<!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">
        <div class="jumbotron">
    <h1>Usage of Jumbotron</h1>
</div>
<div class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu" style="display:block;position:static;margin-bootom:5px;">
<li><a tabindex="-1" href="#">Action 1</a></li>
<li><a tabindex="-1" href="#">Action 2</a></li>
<li><a tabindex="-1" href="#">Action 3</a></li>
<li><a tabindex="-1" href="#">Action 4</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Action 5</a></li>
    </ul>
</div>
    </div>
    <div class="container-fluid">
<div class="dropdown clearfix">
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu" style="display:block;position:static;margin-bootom:5px;">
<li><a tabindex="-1" href="#">Action 1</a></li>
<li><a tabindex="-1" href="#">Action 2</a></li>
<li><a tabindex="-1" href="#">Action 3</a></li>
<li><a tabindex="-1" href="#">Action 4</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Action 5</a></li>
    </ul>
</div>
    </div>
</body>

Result : Shows the difference between container and container-fluid class

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

No comments:

Post a Comment

Contact Us

Name

Email *

Message *

Sponsers

Best Hosting Plans

CC License