Bootstrap tutorial for beginners : working with bootstrap layout, How to Creating Fixed & Fluid Layout in Bootstrap 3 for beginner
Bootstrap Tutorial for beginners : Fixed and Fluid responsive layout in bootstrap templates starts with the .container class. Next we need to create rows using the .row class to wrap the horizontal groups of columns. You must remember, the Rows class must be placed within a .container for proper alignment and padding layout.
At the previews lessons, we have learn about starting using bootstrap, please read :
See you next lessons....
At the previews lessons, we have learn about starting using bootstrap, please read :
Creating Fixed Layout in Bootstrap templates
In your index file, add this bootstrap source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Fixed Bootstrap Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
/* Some custom media query to make
this example even better */
@media screen and (max-width: 991px){
.flexible{
min-height: 150px;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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 fa fa-search" href="#"> Hc-Kr.Com</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link1</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Bootstrap Layouts with Column Wrapping Feature -->
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="demo-content">.col-sm-3 .col-md-2</div>
</div>
<div class="col-sm-9 col-md-8">
<div class="demo-content">.col-sm-9 .col-md-8</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="demo-content">.col-sm-12 .col-md-2</div>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="demo-content">.col-sm-6 .col-md-12</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Instructions :
Bootstrap source code will creates a fixed layout width responsive layout that is 750px pixels wide on small devices like tablet having screen width ≥768px, whereas 970px wide on medium devices like desktop and laptop having screen width ≥992px and 1170px wide on large devices like large desktops having screen width ≥1200px. However the layout width will be automatically calculated for devices that has screen width <768px like cell phones.
Creating Fluid Layout in Bootstrap Template
Different layout with Fixed and Fluid layout at the .container class, if you need an Fixed Layout you just need to include .container class, if Fluid layout, use .container-fluid class,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Fixed Bootstrap Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
/* Some custom media query to make
this example even better */
@media screen and (max-width: 991px){
.flexible{
min-height: 150px;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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 fa fa-search" href="#"> Hc-Kr.Com</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link1</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Bootstrap Layouts with Column Wrapping Feature -->
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="demo-content">.col-sm-3 .col-md-2</div>
</div>
<div class="col-sm-9 col-md-8">
<div class="demo-content">.col-sm-9 .col-md-8</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="demo-content">.col-sm-12 .col-md-2</div>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="demo-content">.col-sm-6 .col-md-12</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Intructions :
the Source code above that is 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: 0 -15px;) used on the .row class.Video Tutorial Creating Fixed & Fluid Layout in Bootstrap
See you next lessons....
COMMENTS