Create Layout with Bootstrap 3 Example

In this bootstrap tutorial, I will explain bootstrap fixed layout example and fluid layout examples using twitter bootstrap.

Recommend Articles:

- What is Bootstrap? - How to use Bootstrap js
- Twitter Bootstrap Grid Layout

Bootstrap Fixed Layout Example

The process of creating fixed yet responsive layout start with the .container class. After that create row with .row class to wrap up the horizontal columns. and .row must be placed within .container for proper alignment and padding. Find the below example :- 

<div class="container">

        <div class="row">

            <div class="col-xs-12"></div>

        </div>

</div>

Twitter Bootstrap Fluid Layout

If you want to create Fluid Layout with Bootstrap css, simply use .container-fluid class instead of .container. Find the below example :- 

<div class="container-fluid">

        <div class="row">

            <div class="col-xs-12"></div>

        </div>

</div>

bootstrap responsive layout tutorial with image

Creating Page Header Bootstrap 3

If you want to create appropriate page header you can use .page-header class shown in following example :-

<div class="page-header">

        <h1>

            Twitter Bootstrap <small>

                An intuitive front-end

                framework

            </small>

        </h1>

</div>

bootstrap page header class

So in this bootstrap tutorial we have learned about how to create responsive layout with bootstrap 3 with examples.