Responsive Web Design(RWD) using Bootstrap

 Bootstrap is a powerful frontend toolkit, it is developed having mobile first strategy and it is the world's most popular framework for building responsive web pages.

<meta name="viewport"> tag is used for proper responsive behavior in mobile devices.

CDN(Content Delivery Network) is the fastest and simplest way to start using it.

Below given script is to be included in <head> tag which also include Popper.js which enables developers to start using dropdowns, tooltips and popovers components.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Popper and Bootstrap JS can be included separately just before ending of <body> tag. When there is no requirement of including dropdowns, popovers and tooltips in the project, the popover js can be excluded by defining below tags just before ending of <body> tag.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

Below illustrated are six breakpoints to determine the responsive layout across devices.

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Grid system

To use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

Equal-width 

For example, below are two grid layouts that apply to every device and viewport, from xs to xxl. Adding any number of unit-less classes for each breakpoint one need and every column will be the same width.

<div class="container text-center">

  <div class="row">

    <div class="col">

      1 of 2

    </div>

    <div class="col">

      2 of 2

    </div>

  </div>

  <div class="row">

    <div class="col">

      1 of 3

    </div>

    <div class="col">

      2 of 3

    </div>

    <div class="col">

      3 of 3

    </div>

  </div>

</div>

Responsive classes 

Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Below given code illustrates the sizing of custom columns and their share in size across devices.

<div class="container text-center">

  <div class="row">

    <div class="col-sm-8">col-sm-8</div>

    <div class="col-sm-4">col-sm-4</div>

  </div>

  <div class="row">

    <div class="col-sm">col-sm</div>

    <div class="col-sm">col-sm</div>

    <div class="col-sm">col-sm</div>

  </div>

</div> 

When Bootstrap doesn't have a specific instruction for a screen size, it defaults to width: 100%. Since xs is smaller than sm, your columns revert to their default block behavior and stack on top of each other.

Using multiple combination of classes

Using a combination of different classes for each tier as needed. Below is a clear example of how it works.

<div class="container text-center">

  <!-- Stack the columns on mobile by making one full-width and the other half-width -->

  <div class="row">

    <div class="col-md-8">.col-md-8</div>

    <div class="col-6 col-md-4">.col-6 .col-md-4</div>

  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

  <div class="row">

    <div class="col-6 col-md-4">.col-6 .col-md-4</div>

    <div class="col-6 col-md-4">.col-6 .col-md-4</div>

    <div class="col-6 col-md-4">.col-6 .col-md-4</div>

  </div>

</div>

Alignment 

Using flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

<div class="container text-center">

  <div class="row align-items-center">

    <div class="col">

      One of three columns

    </div>

    <div class="col">

      One of three columns

    </div>

    <div class="col">

      One of three columns

    </div>

  </div>

</div>

<div class="container text-center">

  <div class="row">

    <div class="col align-self-start">

      One of three columns

    </div>

    <div class="col align-self-center">

      One of three columns

    </div>

    <div class="col align-self-end">

      One of three columns

    </div>

  </div>

</div>

Horizontal alignment

Changing the horizontal alignment with any of the responsive justify-content-* classes.

<div class="container text-center">

  <div class="row justify-content-start">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

  <div class="row justify-content-center">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

  <div class="row justify-content-end">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

  <div class="row justify-content-around">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

  <div class="row justify-content-between">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

  <div class="row justify-content-evenly">

    <div class="col-4">

      One of two columns

    </div>

    <div class="col-4">

      One of two columns

    </div>

  </div>

</div>