07-pokrocile-techniky/bootstrap-grid.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>

    <div class="container">
      <!-- https://getbootstrap.com/docs/5.3/layout/grid/ -->

      <h1>Bootstrap grid</h1>

      <h2>Desktops col-lg &ge;1200px</h2>

      <div class="row">
        <div class="col-lg-4">.col-lg-4</div>
        <div class="col-lg-4">.col-lg-4</div>
        <div class="col-lg-4">.col-lg-4</div>
      </div>

      <h2>Desktops col-md &ge;992px</h2>

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

      <h2>Tablets col-sm &ge;768px</h2>

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

      <h2>Phones col-xs &lt;768px</h2>

      <div class="row">
        <div class="col-xs-4">.col-xs-4</div>
        <div class="col-xs-4">.col-xs-4</div>
        <div class="col-xs-4">.col-xs-4</div>
      </div>

    </div>

  </body>
</html>