Responsive Web Design using Bootstrap

Responsive Web Design is about using Bootstrap to automatically resize a website. Bootstrap is a very popular framework that uses HTML, CSS and jQuery to make responsive web pages.

Responsive Web Design is about making a website look good on all devices (desktops, tablets, and phones)

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other. Bootstrap also gives you the ability to easily create responsive designs

Bootstrap 4 Grid System

Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns. The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap 4 grid system has five classes:

• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

<! — Control the column width, and how they should appear on different devices →
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>

<! — Or let Bootstrap automatically handle the layout →
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>