Prev Page
Next Page  
Bootstrap layouts
Bootstrap layouts are following : 

1. Fixed Layouts 
2. Fluid Layouts 
3. Responsive Layouts


Fixed Layouts : 

The fixed  layout starts with the .container (or) .container-fluid (or) .row class. After that create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container (or) .container-fluid (or) .row class. for proper alignment and padding. The following example fixed top layout :
Example :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fixed Layout</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    body{
    padding-top: 50px;
    }
</style>

</head>
<body>

<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.freetimelearning.com">Free Time Learning</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.freetimelearning.com" target="_blank">HOME</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">BOOTSTRAP</a></li>
                <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
                <li><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank">CSS</a></li>
<li><a href="http://www.freetimelearning.com/contact-us.php" target="_blank">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Twitter Bootstrap</h1>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p><p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions. <a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a> </p>
<p><a href="http://www.freetimelearning.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
    <div class="col-xs-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.</p>
<p><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>HTML</h2>
<p>Hyper Text Marjup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991. You can visit and browse the first website and first web page at the http://info.cern.ch/ address. </p>
<p><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals. CSS is categorised into three types :  Class base css, Tag base css, ID base css</p>
<p><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
 
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>&copy; Copyright 2017 Free Time Learning</p>
</footer>
</div>
</div>
</div>

</body>
</html>                                
Output :
fixed layout

Fluid Layout  : 

The class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on element to offset the left and right margin of -15px (i.e. margin: 0px -15px;) used on the .row class. The following example a fluid layout that covers 100% width of the screen.
Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fluid Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.freetimelearning.com">Free Time Learning</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.freetimelearning.com" target="_blank">HOME</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">BOOTSTRAP</a></li>
                <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
                <li><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank">CSS</a></li>
<li><a href="http://www.freetimelearning.com/contact-us.php" target="_blank">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1>Learn to Twitter Bootstrap</h1>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p><p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions. <a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a> </p>
<p><a href="http://www.freetimelearning.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
    <div class="col-xs-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.</p>
<p><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>HTML</h2>
<p>Hyper Text Marjup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991. You can visit and browse the first website and first web page at the http://info.cern.ch/ address. </p>
<p><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals. CSS is categorised into three types :  Class base css, Tag base css, ID base css</p>
<p><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
 
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>&copy; Copyright 2017 Free Time Learning</p>
</footer>
</div>
</div>
</div>
</body>
</html>                                
Output :
fixed layout

Responsive Layouts : 

Responsive layouts automatically adjust to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phones. Use this meta tag  <meta name="viewport" content="width=device-width,initial-scale=1"> will automatically adjest to device screen. Are you don't use this meta tag it is not responsive layout. That's why compulsory use the <meta> tag. The following example Responsive  layouts :

Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fluid Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.freetimelearning.com">Free Time Learning</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.freetimelearning.com" target="_blank">HOME</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank">BOOTSTRAP</a></li>
                <li><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank">HTML</a></li>
                <li><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank">CSS</a></li>
<li><a href="http://www.freetimelearning.com/contact-us.php" target="_blank">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1>Learn to Twitter Bootstrap</h1>
<p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p><p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions. <a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a> </p>
<p><a href="http://www.freetimelearning.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
    <div class="col-xs-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.</p>
<p><a href="http://www.freetimelearning.com/bootstrap-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>HTML</h2>
<p>Hyper Text Marjup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991. You can visit and browse the first website and first web page at the http://info.cern.ch/ address. </p>
<p><a href="http://www.freetimelearning.com/html-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
<div class="col-xs-4">
<h2>CSS</h2>
<p>CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals. CSS is categorised into three types :  Class base css, Tag base css, ID base css</p>
<p><a href="http://www.freetimelearn.com/css-basic-tutorial.php" target="_blank" class="btn btn-primary">Learn More &raquo;</a></p>
</div>
 
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>&copy; Copyright 2017 Free Time Learning</p>
</footer>
</div>
</div>
</div>
</body>
</html>                                
fixed layout
  Prev Page
Next Page