Bootstrap Responsive Design
Introduction
This tutorial explains how to apply responsive design in web layouts. Throughout the course, you will learn about responsive web design. With the proliferation of mobile devices, ensuring a good visual experience for users browsing your website on mobile devices has become an inevitable 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 have a good visual experience when browsing a website on devices of various sizes. For example, you browse a website on a computer monitor and then on a smartphone. The smartphone screen is much smaller than the computer monitor, but you do not feel any difference, and the user experience is almost the same on both devices. This indicates that the website has excellent responsive design.
We have already applied responsive performance in our fluid layout example and invite you to browse it on different screen sizes. You can adjust the browser window size using extensions like Chrome or FireFox.
Click here to view the Bootstrap responsive design example.
How Does Responsive Web Design Work?
To apply responsive web design, you need to create a CSS that includes styles adaptable to various device sizes. Once the page loads on a specific device, the page uses various fonts and web development technologies, such as media queries (Media Queries). It first detects the device's viewport size and then loads device-specific styles.
Deep Dive into Responsive Web Design CSS
We will learn how "responsive design" achieves subtle differences by studying 'bootstrap-responsive.css'. Before that, you must include the following code in the head section of your webpage:
<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.
The width attribute sets the screen width. It can contain a value, such as 320, indicating 320 pixels, or a value of 'device-width', which tells the browser to use the original resolution.
The initial-scale attribute is the initial scale of the viewport. When set to 1.0, it renders the device's original width.
Of course, you must add Bootstrap's responsive CSS as follows:
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Now, if you look up the responsive CSS file, you will find that after some common declarations (from line 10 to 22), there are various sections starting with '@media'. This is how styles for different devices are written.
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, starting 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.
Thus, the basic function of the stylesheet is to determine the styles to be used based on the device's maximum and minimum widths by using the 'min-width' and 'max-width' attributes.
Explanation
To make the layout more responsive, Bootstrap does three things:
- Modifies the width of columns in the grid.
- It uses stack elements instead of floating elements whenever necessary. If you are not clear about what stack elements are, the following table from w3.org might provide some help:
The root element (html) forms the root of the stacking context, and other stacking contexts are generated by any positioned elements (including relatively positioned elements with a computed 'z-index' value other than 'auto'). A stacking context does not necessarily need to be relative to the containing block.
- To render headings and text correctly, their sizes must be considered.
Developing Mobile-Friendly Layouts Faster
Bootstrap offers several practical classes for developing mobile-friendly layouts, which can be found in 'responsive.less'.
.visible-phone, visible on phones with a width of 767px or less, hidden on tablets from 979px to 768px, and hidden on desktops, which is the default.
.visible-tablet, hidden on phones with a width of 767px or less, visible on tablets from 979px to 768px, and hidden on desktops, which is the default.
.visible-desktop, hidden on phones with a width of 767px or less, hidden on tablets from 979px to 768px, and visible on desktops, which is the default.
.hidden-phone, hidden on phones with a width of 767px or less, visible on tablets from 979px to 768px, and visible on desktops, which is the default.
.hidden-tablet, visible on phones with a width of 767px or less, hidden on tablets from 979px to 768px, and visible on desktops, which is the default.
.hidden-desktop, visible on phones with a width of 767px or less, visible on tablets from 979px to 768px, and hidden on desktops, which is the default.
Click here to download all HTML, CSS, JS, and image files used in this tutorial.