Bootstrap’s Responsive Layout

bootstrap responsive layout

What is responsive web design?

Responsive web design responds to the user’s behavior and environment based on screen size, platform and orientation. It consists of a mix of fluid grids and layouts, responsive images and CSS media queries.

1. Turning On Responsive Features

1. Download bootstrap-responsive.css

2. Include the code below within the <head> of the document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

The first line of code is the viewport metatag. In mobile devices it makes the browser use the real size of the device. This way a device with a width of 320px will not display a website like a device with a width of 1280px.

responsive design viewport metatag

The second line of code is a link to bootstrap-responsive.css.


2. Understanding Bootstrap’s Grid

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

On the graphic below you can see that a fluid grid use percents instead of pixels for column widths. In a fluid grid, the addition of all the columns widths and the gutter should be 100%.

bootstrap grid

Adding a Container, Rows and Columns

To create a layout like this:

simple bootstrap grid

You must add the following tags and classes:

bootstrap grid and columns

<div class="container">
    <div class="row">
        <div class="span12"> 
            
             Welcome Text
   
            <div class="row">
                  <div class="span4"> Column One</div>
                  <div class="span4"> Column One</div>
                  <div class="span4"> Column One</div>
             </div>

        </div><!-- Span 12 ends -->
    </div><!-- Row Ends -->
</div><!-- Container Ends -->

3. Bootstrap’s Media Queries

Media queries allow for custom CSS based on a number of conditions (ratios, widths, display type, etc) but usually focuses around min-width and max-width.

Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of existing devices.

Bootstrap’s Media Queries:

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Supported devices

bootstrap-supported-devices

CSS3 Media Queries:

 /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
 @media (max-width: 480px) { ... }

Example:

To change the background color of a website to red only on devices with a max-width of 767px use the code:

media queries styles

Note how 2 sets of curly braces are necessary (maroon and pink). When working with media queries extra caution is necessary to properly close the curly braces of the queries and of the styles.

IE 8 and below do not support CSS3 media queries:

For IE 8 and below that do not support media queries and/or HTML5 use the code below in between the <head> tags:

<!-- html5.js & media-queries.js (fallback) --> 
<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

a. CSS3-MediaQueries-js

A JavaScript library that supports the full range of media queries introduced in CSS3.

b. Respond.js

A fast & lightweight (only 3kb minified) polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).


4. Flexible images

In responsive web design you can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.

img {
	max-width: 100%;
	height: auto;
    }

Bootstrap will automatically  resize an image if  it is wrapped within a  <div> tag  with a class “span1″ through “span12″.

Image without a span wrap, just floated left in a viewport of 800px. It doesn’t resize:

resize images in bootstrap

<div class="span12">
<img src="images/320.png" class="pull-left"/>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
</div>

Image wrapped in a “span3″ and text wrapped in a “span9″ in a viewport of 800px. It resizes:

resize images bootstrap

<div class="span3">
<img src="images/320.png"/>
</div>
<div class="span9">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
</div>

Using custom classes to resize images in Bootsrap:

If you need the text to wrap the image but the image to be responsive you can use custom classes.

Image without a span wrap, floated left and with a custom class in a viewport of 800px. It resizes:

resize-image bootstrap custom class

<div class="span12">
<img src="images/portfolio/320.png" class="pull-left myclass"/>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
</div>

Then set the width of the image in percents

.myclass {
    width:20%
}

5. Responsive Classes

Bootstrap comes with 6 ready-to-use classes to show and hide elements in desktop, tablets and phones:

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

6. Relative Margins and Padding

If you need to add margins or padding to any element in responsive web design do not use a fixed pixel value, use percents instead.

bootstrap margins

<div class="span12">
<img src="images/portfolio/320.png" class="pull-left myclass"/>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
</div>
.myclass {
    width:30%;
    margin: 0 2% 2% 2%;   
}
Category: Orlando Web Design Tags: , No Comments

Related Posts

orlando web deisgn bootstrap

Customizing Bootstrap

Orlando Web Design & Development Twitter's Bootsrap is a powerful front-end framework for faster and easier web dev... Read More »
web design orlando lesson 6

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development CSS Page Layout: Understanding CSS Positioning There are 3 ways of creating CSS l... Read More »
dreamweaver define site & connect ftp

Orlando Web Design: Defining a site in Dreamweaver

Orlando Web Design & Development Dreamweaver is used to create and edit web pages on your local computer. Once th... Read More »

Leave a Comment

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


*