Bootstrap Responsive Design

Introduction

This tutorial explains how to apply responsive design in web page layouts. In this course, you will learn about responsive web design. With the prevalence of mobile devices, how to provide users with a good visual experience when browsing your website on mobile devices has become an unavoidable issue. Responsive web design is an effective method to achieve this goal.

What is Responsive Web Design

Responsive web design is a method that allows users to get a good visual experience when browsing a website on devices of various sizes. For example, you first browse a website on a computer monitor, then on a smartphone. The smartphone screen is far smaller than the computer monitor, but you do not notice any difference; the user experience of both is almost identical. This shows that the website does very well in responsive design.

We have already, in ourfluid layout example,appliedresponsiveness,and invite you to browse at different screen sizes. You can use theChromeorFireFoxwindow resizer extension to adjust the browser.

Click here to viewBootstrap Responsive Design Example。

How Responsive Web Design Works

To apply responsive web design, you need to create a CSS that contains styles adapted to various device sizes. Once the page is loaded on a specific device, the page uses various fonts and web development technologies, such as media queries. At this time, the device's viewport size is detected first, and then device-specific styles are loaded.

A Deeper Look at the CSS of Responsive Web Design

We will study 'bootstrap-responsive.css' to understand how "responsive design" achieves subtle differences. Before doing this, you must add the following line of code to the head section of your web page:

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

The viewport meta tag overrides the default viewport and helps load styles related to the specific viewport.

widthThe attribute sets the screen width. It contains a value, such as 320, which means 320 pixels, or a value of 'device-width', which tells the browser to use the original resolution.

initial-scaleThe attribute is the initial scale of the viewport. When set to 1.0, it will render the original width of the device.

Of course, you must add Bootstrap's responsive CSS, as follows:

<link href="assets/css/bootstrap-responsive.css.html" rel="stylesheet">

Now, if you look at the responsive CSS file, you will find that after some common declarations (from lines 10 to 22), there are various'@media'sections that begin with. This is how to write styles that apply to various devices.

The first section starts with '@media (max-width: 480px)' and sets styles for devices with a maximum width of 480 pixels.

The second section starts with '@media (max-width: 767px)' and sets styles for devices with a maximum width of 767 pixels.

The third section starts with '@media (min-width: 768px) and (max-width: 979px)' and sets styles for devices with a minimum width of 768 pixels and a maximum width of 979 pixels.

The next section sets styles for devices with a maximum width of 979 pixels. So it starts with '@media (max-width: 979px)'.

The last two sections start with '@media (min-width: 980px)' and '@media (min-width: 1200px)' respectively. The former sets styles for devices with a minimum width of 980 pixels, and the latter sets styles for devices with a minimum width of 1200 pixels.

So, the basic effect of this stylesheet is that, by using 'min-width' and 'max-width' attributes, it determines the styles to use based on the device's maximum and minimum widths.

Explanation

To make the layout more responsive, Bootstrap does three things:

1. Modified the widths of the columns in the grid.

2. Whenever necessary, it uses stacking elements instead of floating elements. If you are still not clear about what stacking elements are, the following form from w3.org may provide some help:

The root element (html) forms the root of the stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements with a computed value of 'z-index' other than 'auto'). Stacking contexts are not necessarily relative to the containing block.

3. To correctly render headings and text, their sizes.

Develop mobile-friendly layouts faster

Bootstrap has several practical classes for developing mobile-friendly layouts. These classes can be seen in 'responsive.less'.

.visible-phone, visible on phones with width 767px and below, hidden on tablets between 979px and 768px, hidden on desktops; this is the default.

.visible-tablet, hidden on phones with width 767px and below, visible on tablets between 979px and 768px, hidden on desktops; this is the default.

.visible-desktop, hidden on phones with width 767px and below, hidden on tablets between 979px and 768px, visible on desktops; this is the default.

.hidden-phone, hidden on phones with width 767px and below, visible on tablets between 979px and 768px, visible on desktops; this is the default.

.hidden-tablet, visible on phones with width 767px and below, hidden on tablets between 979px and 768px, visible on desktops; this is the default.

.hidden-desktop, visible on phones with width 767px and below, visible on tablets between 979px and 768px, hidden on desktops; this is the default.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.