Bootstrap 4 grids

Bootstrap 4 has 5 types of classes for different viewports and the breakpoints are:

1. col-xs-* -  till 575 pixels

2. col-sm-* - from 576 pixels till 767 pixels

3. col-md-* - 768 pixels till 991 pixels

4. col-lg-* - 992 pixels till 1199 pixels

5. col-xl-*  - pixels above 1200

Copy and paste the below code to run and check the grid width in different viewports.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!--  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

</head>

<body>

<div class="container-fluid">

  <h1>Bootstrap 4 Grids</h1>

  <p>Resize the browser window to see the effect.</p>

   <p>Fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).</p>

  <div class="row">

    <div class="col-sm-4 col-md-6 col-lg-2 col-xl-4" style="background-color:lavender;">col-sm-4 col-md-6 col-lg-2 col-xl-4</div>

    <div class="col-sm-4 col-md-3 col-lg-6 col-xl-4" style="background-color:lavenderblush;">col-sm-4 col-md-3 col-lg-6 col-xl-4</div>

    <div class="col-sm-4 col-md-3 col-lg-3 col-xl-4" style="background-color:lavender;">col-sm-4 col-md-3 col-lg-3 col-xl-4</div>

  </div>

</div>

    <hr />

<div class="container">

  <p>Resize the browser window to see the effect with <b>Container</b> class.</p>

  <div class="row">

     <div class="col-sm-4 col-md-6 col-lg-2 col-xl-4" style="background-color:lavender;">col-sm-4 col-md-6 col-lg-2 col-xl-4</div>

    <div class="col-sm-4 col-md-3 col-lg-6 col-xl-4" style="background-color:lavenderblush;">col-sm-4 col-md-3 col-lg-6 col-xl-4</div>

    <div class="col-sm-4 col-md-3 col-lg-3 col-xl-4" style="background-color:lavender;">col-sm-4 col-md-3 col-lg-3 col-xl-4</div>

  </div>

</div>

<div style="margin-top:15px">

    <p> col-xs-*  -@media (max-width: 575px) { ... }</p>

     <p>col-sm-* - @media (min-width: 576px) and (max-width: 767px) { ... }</p>

     <p>col-md-* - @media (min-width: 768px) and (max-width: 991px)</p>

     <p>col-lg-* -@media (min-width: 992px) and (max-width: 1199px) { ... }</p>

    <p>col-xl-* - @media (min-width: 1200px) { ... }</p>

</div>

</body>

</html>