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