YouTip

# Bootstrap Responsive Design ## Introduction This tutorial explains how to apply responsive design in web layouts. In this course, you will learn about responsive web design. With the widespread use of mobile devices, ensuring users have a good visual experience when browsing your website on mobile 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 browse websites and have a good visual experience across devices of various sizes. For example, you might first browse a website on a computer monitor and then on a smartphone. Although the smartphone's screen size is much smaller than the computer monitor, you don't notice any difference, and the user experience is almost identical. This indicates that the website has implemented responsive design well. We have already applied (#) in our (#) and invite you to browse it on different screen sizes. You can adjust the browser window size using extensions for (https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh) or (https://addons.mozilla.org/en-us/firefox/addon/window-resizer/). Click here to view the (#). ## How Responsive Web Design Works To apply responsive web design, you need to create CSS that includes styles to adapt to various device sizes. Once the page loads on a specific device, the page uses various fonts and web development techniques, such as Media Queries. At this point, the device's viewport size is first detected, and then device-specific styles are loaded. ## A Deeper Look into the CSS for Responsive Web Design We will learn how "responsive design" achieves subtle differences by studying 'bootstrap-responsive.css'. Before that, you must add the following line of code in the head section of your webpage: The viewport meta tag overrides the default viewport and helps load styles related to the specific viewport. The **width** property sets the screen width. It can contain a value like 320, representing 320 pixels, or the value 'device-width', which tells the browser to use the original resolution. The **initial-scale** property 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 shown below: Now, if you look at the responsive CSS file, you will find that after some common declarations (from line numbers 10 to 22), there are various sections starting with **'@media'**. This is how styles applicable to various devices are written. The first section starts with '**@media (max-width: 480px)**', setting styles for devices with a maximum width of 480 pixels. The second section starts with '**@media (max-width: 767px)**', setting styles for devices with a maximum width of 767 pixels. The third section starts with '**@media (min-width: 768px) and (max-width: 979px)**', setting 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 function of this stylesheet is to determine the styles to use based on the device's maximum and minimum width by using the '**min-width**' and '**max-width**' properties. ## Explanation To make the layout more responsive, Bootstrap does three things: 1. Modifies the width of columns in the grid. 2. Uses stacked elements instead of floated elements whenever necessary. If you are not sure what stacked elements are, the following table from w3.org might help: > The root element (html) forms the root of the stacking context, and other stacking contexts are generated by any positioned element (including relatively positioned elements with a computed 'z-index' value other than 'auto'). Stacking contexts are not necessarily related to containing blocks. 3. Correctly renders the size of headings and text. ## Faster Development of Mobile-Friendly Layouts Bootstrap has several practical classes for developing mobile-friendly layouts. These classes can be found in 'responsive.less'. **.visible-phone**, visible on phones with a width of 767px and below, hidden on tablets from 979px to 768px, hidden on desktops, which is the default. **.visible-tablet**, hidden on phones with a width of 767px and below, visible on tablets from 979px to 768px, hidden on desktops, which is the default. **.visible-desktop**, hidden on phones with a width of 767px and below, hidden on tablets from 979px to 768px, visible on desktops, which is the default. **.hidden-phone**, hidden on phones with a width of 767px and below, visible on tablets from 979px to 768px, visible on desktops, which is the default. **.hidden-tablet**, visible on phones with a width of 767px and below, hidden on tablets from 979px to 768px, visible on desktops, which is the default. **.hidden-desktop**, visible on phones with a width of 767px and below, visible on tablets from 979px to 768px, hidden on desktops, which is the default. [Click here to download all HTML, CSS, JS, and image files used in this tutorial.](#)