February 1, 2016 12:35 pm

Bootstrap 3 Responsive Website Layout Guidance

Responsive web design is a process to create as well as to develop numerous of enhanced bootstrap websites to enable a better accessibility option by users with an optimal viewing experience at the time of viewing any website.

Responsive CSS Framework bootstrap

With an immense growing demand of the usage of numerous of smartphones and tablets, it has become almost a necessary consideration not to ignore any optimization process of websites for various mobile devices. Well, responsive web design is one of the highly advanced methods that is now highly preferred alternative available to any web designing process and efficient ways to target a broad range of devices with much less effort involved.
Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.

Let’s begin with the  designing process of Bootstrap Layout 3:

Setting up

To set a highly  responsive Twitter Bootstrap environment, you need to go through the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above meta tag is  setting up the width of the page to the width of the device and initially scaling it to 1, i.e. default size.

Then we have to also use the correct CSS file from the BootStrap CSS files. Last time we had used only css/bootstrap.css but this time we will be using css/bootstrap-responsive.css also. So we are adding an extra responsive stylesheet to our webpage.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">

Let’s proceed step by step to create a Twitter Bootstrap Responsive system

The Responsive Navigation

Here is a markup snapshot for creating responsive navigation systems:

<div class="navbar navbar-fixed-top">

</div>

navbar class, already known to us, is for showing the navigation section. An additional navbar-fixed-top makes it stick to the top of the webpage. Pretty clear!

Let’s move ahead and insert some more codes into it:

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

</div>

</div>

</div>

navbar-inner helps make BootStrap understand that you are going to place some stuff inside the navigation. container, as we have seen, is used to contain everything inside it as a wrapper.

Earlier it was just a basic structure of the navigation bar. Let’s see the real magical stuff that makes the navigation responsive.

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-th-list"></span></a>

<a href="#" class="brand">Site Name</a>

<div class="nav-collapse collapse">

<ul class="nav pull-right">

<li class="active"><a href="#">Menu Item 1</a></li>

<li><a href="#">Menu Item 2</a></li>

<li><a href="#">Menu Item 3</a></li>

</ul>

</div>

</div>

</div>

</div>

Marketing Area

Here you will find that he marketing section is developed with non-responsive web pages that are created by using a div structure to efficiently structure the designing process along with the hero-unit class. Place a container wrapper inside it and add h1, p and link with btn btn-primary classes. The code should look like below:

<div class="hero-unit">

<div class="container">

<h1>Many desktop publishing packages</h1>

<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

</div>

</div>

Adding a class lead to the paragraph elements will make them stand out as compared to other p elements. Also make sure the hero-unit div is completely outside the navigation div.

Content Section

Content section uses row-fluid system inside the row class that will enable the row of elements to easily adjust to the webpage and flow down as and when needed.

Right Sidebar

The right sidebar, is known as  span4 that contains vertical navigation listing methods. The  following code acts like this:

<div class="span4 right-sidebar">

<ul class="nav nav-list">

<li class="nav-header">Quick Links</li>

<li><a href="#">Quick Link 1</a></li>

<li><a href="#">Quick Link 2</a></li>

<li><a href="#">Quick Link 3</a></li>

<li><a href="#">Quick Link 4</a></li>

</ul>

</div>

Classes nav nav-list is used for vertical navigation listing system. A class divider in this is linked to li element to separate all li elements. Below you will come across with a horizontal thin lining process. nav-header is used to sigtnify the li element.

Building the footer

The footer that is shown in this code works as a simple container that comprises of three equal sized span* features. As you can see from the below given code  section in the demo page, the horizontal line above the footer is a <hr /> element.

So here you go with the following code for showing footer:

<div class="container">

<div class="row-fluid">

<div class="span4">

<p>&copy; 2016 <a href="#">Site Name</a></p>

</div>

<div class="span4 text-center">

<ul class="nav inline">

<li><a href="#">Footer Link 1</a></li>

<li><a href="#">Footer Link 2</a></li>

<li><a href="#">Footer Link 3</a></li>

<li><a href="#">Footer Link 4</a></li>

</ul>

</div>

<div class="span4 text-right">

<p>Powered By Twitter BootStrap 2.3.2</p>

</div>

</div>

</div>

text-center, text-right and text-left are showing how to align classes while developing the footer section. Further,you can make them use as and when required by you at the time you start creating footer.

Author Samuel Dawson

Samuel Dawson is a mind blowing expert in converting Photoshop to HTML CSS with responsive design. Samuel has shared his thoughts above on how important is responsive design in today's web world.


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *