Bootstrap Fixed Layout

The biggest advantage of using Bootstrap for web development is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components. A number of functions can be done without writing even a single line of code thus it is easy to use and saves a lot of time. If you have basic knowledge of working on Html and CSS it is generally very easy to start working with Bootstrap. The latest version of Bootstrap after Bootstrap 2.x is Bootstrap 3.

Creating Fixed Layout with Bootstrap3

Bootstrap is a widely used tool today due to its ease of using and its easy availability among the programmers. With the help of Bootstrap you can create the layouts of web pages in a very particular way according to a specific set of requirements. These layouts can be easily modified according to the need of the coder as it can be based on fixed number of pixels that are responsive from the start.

The process of creating a fixed and responsive layout in Bootstrap starts with the .container class. The layout is as follows

The following code creates a fixed 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.


			 <!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> Bootstrap 3 Fixed Layout Example</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> 
<style type="text/css"> 
    body{
    	padding-top: 70px;
    }
</style> 
</head> 
<body> 
<nav id="myNavbar" class="navbar navbar-default navbar-inverse 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="#"> JavaTportal</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.javatportal.com" target="_blank"> Home</a> </li> 
				<li> <a href="http://www.javatportal.com/" target="_blank"> About</a> </li> 
				<li> <a href="http://www.javatportal.com/" target="_blank"> Contact</a> </li> 
			</ul> 
		</div> 
	</div> 
</nav> 
<div class="container"> 
<div class="jumbotron"> 
		<h1> Learn to Create Websites</h1> 
		<p> In today's world internet is the most popular way of connecting with the people. At <a href="http://www.javatportal.com" target="_blank"> javatportal.com</a>  you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p> 
		<p> <a href="http://www.javatportal.com" target="_blank" class="btn btn-success btn-lg"> Get started today</a> </p> 
	</div> 
	<div class="row"> 
		<div class="col-xs-4"> 
			<h2> Core Java</h2> 
			<p> Java Tutorial or Core Java Tutorial or Java Programming Tutorial is a programming language and a platform.
In this page, we will learn history and features of java. Additionally, we will see why java is called a platform
</p> 
 			<p> <a href="http://www.javatportal.com/corejava-tutorial" target="_blank" class="btn btn-success"> Learn More »</a> </p> 
		</div> 
		<div class="col-xs-4"> 
			<h2> JSP-Tutorial</h2> 
<p> JSP technology is used to create web application just like Servlet technology. It can be thought of as an extension to servlet because it provides more functionality than servlet such as expression language, jstl etc.
</p> 		<p> <a href="http://www.javatportal.com/jsp-Tutorial" target="_blank" class="btn btn-success"> Learn More »</a> </p> 
		</div> 
		<div class="col-xs-4"> 
			<h2> Bootstrap</h2> 
			<p> Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p> 
			<p> <a href="http://www.javatportal.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success"> Learn More »</a> </p> 
		</div> 
	</div> 
	<hr> 
	<div class="row"> 
		<div class="col-xs-12"> 
			<footer> 
				<p> © Copyright 2015 JavaTportal</p> 
			</footer> 
		</div> 
	</div> 
</div> 
</body> 
</html>                                 		

Output :

browsers

Creatig Rows

After this you can create rows with the help of .row class to wrap the horizontal groups of columns. It should be noted that rows must be placed within a .container for obtaining a proper alignment and padding.

Creating Columns

After you have completed creating rows, you can move ahead to learn how to create columns within the rows. Columns can easily be created inside the rows using a number of predefined grid classes. These classes are mainly: .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents the grid number and should be taken from 1 to 12.

The actual content that has to be included in the web pages such as text, images, videos, links etc. should be placed properly within the columns and only columns may be the immediate descendent of rows.

Bootstrap allows us to work with both fixed layouts and fluid layouts. There is not much difference in the coding of the two layouts and the classes used are too similar in certain aspects. Since Bootstrap is a free software interface so creating fixed layouts with it is much easier than doing the same with different paid and more complex web designing interfaces. Another great point that should be noted is that it is quite similar as working in Html coding, so the basic knowledge of Html makes it quite obvious to the coder as to how to create fixed or fluid layouts.

There are a number of online sites and tutorial sites that provide information about Bootstrap. Learning coding using Bootstrap does not require many software requirements as well because it is much user friendly. With the help of these online tutorials, you can be fully apprised of how to create fixed layouts in Bootstrap and in addition also how to work with other types of layouts as well.

The online websites also give you the option of online editors where you just need to write your code and see how it works or what kind of errors it produces. This saves space of our personal disk and allows the coder to practice properly without even installing the program or the interface on their own machine.

There are about a hundred of tutorials on Bootstrap easily available on the net to be browsed and learnt from. Creating a fixed layout in Bootstrap has also been easily explained by professional programmers and coders for the ease of novice code writers.

The variation in the layouts makes it possible to make them friendly for a big range of gadgets such as mobile phones, tablets, laptops and other internet based gadgets. Bootstrap has evolved as a good tool for website and web page development due to its easy usage and its widespread availability which makes it one of the best web designing interfaces.