articles

Responsive Layout using Bootstrap

Anonymous User9033 21-Aug-2014

In this article I’m explaining, how to design responsive layout using bootstrap.

Responsive Layout:

Responsive design is a web design and development technique that creates a site or system that reacts to the size of a user’s screen. Responsive design will optimize a user’s browsing experience by creating a flexible and responsive web page, optimized for the device that is accessing it.

Need For Responsive Web Design:

Every people open website on mobile device, tablet device and desktop on different-different size that time our website layout is not good looking so web designer design the different-different website for different-different devices for good look and feel website so that process is very time taken. So reduce that process invent to “Responsive Layout” word.

Pillar of Responsive Layout: 

1.     Fluid Grids

2.     Flexible Images

3.     Media Queries 

1. Fluid Grids:

The general practice in web design is to employ fixed width layouts. It means that the page and its constituent elements have a fixed size and width and positioned around the center. Liquid layouts offer us a greater advantage with the increasing number of devices with web access. A liquid layout expands with the page.

2. Flexible Images:

Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a problem when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

3. Media Queries:

Fluid grid layouts are very important for responsive web development, but there are other issues to consider. If the width of the device becomes too narrow, like in a small mobile phone, the website design can fall apart. This is where media queries come in. These media queries are based in CSS3 and allow us to not only target the particular device classes but physical characteristics of the device which is rendering the web site.

Add these four files:

<link href="~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/Content/blog.css" rel="stylesheet" />

<script src="~/scripts/jquery-2.1.0.min.js"></script>

<script src="~/scripts/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>

Example:


Html Code

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Brand", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active">@Html.ActionLink("Home", "", "")</li>
                <li>@Html.ActionLink("Article", "", "")</li>
                <li>@Html.ActionLink("Blog", "", "")</li>
                <li>@Html.ActionLink("Forum", "", "")</li>
                <li>@Html.ActionLink("Interview", "", "")</li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="themes">
                        <li><a href="../default/">Default</a></li>
                        <li class="divider"></li>
                        <li><a href="../amelia/">Amelia</a></li>
                        <li><a href="../cerulean/">Cerulean</a></li>
                        <li><a href="../cosmo/">Cosmo</a></li>
                    </ul>
                </li>
            </ul>
 
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Sign Up", "", "")</li>
                <li>@Html.ActionLink("Login", "", "")</li>
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</header>
<div class="container">
    <br />
    <br />
    <div class="row">
        <img src="~/Content/Images/Sample1.png" class="banner" />
    </div>
    <br />
   
    <div class="row">
        <div class="col-md-4">
            <img src="~/Content/Images/mobile-devlopment.png" />
        </div>
        <div class="col-md-8">
            <p>
                Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a problem when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.
            </p>
        </div>
    </div>
    <br />
    <br />
    <div class="well">
        <div class="row">
            <div class="col-md-6">
                <label>First Name</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Last Name</label>
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>Email ID</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Country</label>
                <select>
                    <option>---Select---</option>
                    <option>India</option>
                    <option>USA</option>
                    <option>South Africa</option>
                    <option>Westindies</option>
                </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>State</label>
                <select>
                   
                </select>
            </div>
            <div class="col-md-6">
                <label>City</label>
                <select>
                   
                </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>Zip Code</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Contact No</label>
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-12 text-right">
                <input type="button" value="Submit" class="btn btn-info" />
                <input type="button" value="Clear" class="btn btn-info" />
            </div>
        </div>
    </div>
    <br />
    <br />
</div>

 

Blog.css

 

img
{
    width: auto;
    max-width: 100%;
}
.banner {
    width:100%;
    height:250px;
}
 
input[type='text'],select {
    width:100%;
    height:30px;
}
 
@media screen and (min-width: 100px) and (max-width:750px) {
    .banner {
        display:none;
    }
}

 

Output:

Open Website on Desktop

Responsive Layout using Bootstrap

 

Open website on tablet device

Responsive Layout using Bootstrap

 

Open website on mobile device

Responsive Layout using Bootstrap

 


Updated 03-Jan-2020
I am a content writter !

Leave Comment

Comments

Liked By