divide page into one section in web design

Question

I'm trying to make a sidebar that collapses when using a phone. But after the first three images the images on the next line start below the sidebar instead of beside it.

The top part is ok, but when scrolling down to the other images they don't arrange themselves beside the sidebar. it shows:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
  <div class="row mt-5">
    <div class="col-3 vertical-test">
      <nav class="navbar navbar-expand-lg navbar-light">
        <!-- <div class="container-fluid"> -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav flex-column p-2">
            <li class="nav-item">
              <a class="navbar-brand active" href="#">DIABLO DAILY</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">NEW ITEMS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BRANDS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CURATED PIECES</a>
            </li>
          </ul>
        </div>
        <!-- </div> -->
      </nav>
    </div>



    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid shadow" src="https://via.placeholder.com/120">
    </div>


    <!-- for the next line -->
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>
    <div class="col-3">
      <img class="img-fluid" src="https://via.placeholder.com/120">
    </div>




    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>

Bootstrap 5 is flexbox-based. You should probably have your sidebar in one column, and your image grid _nested_ in another primary column. The sidebar and the image columns shouldn't be siblings. — isherwood, Oct 11 '21 at 18:45
You should also have a container around your outer rows. See the [grid docs](https://getbootstrap.com/docs/5.1/layout/grid/#nesting). — isherwood, Oct 11 '21 at 18:46

Rok Benko · Accepted Answer · 2021-10-15T12:49:04.510

Here you go...

As the comment above suggests, you should put the sidebar in one column and put all the rest in the column next to it. I rearranged your code a little bit (e.g., changed col-3 into col-4) so that the output looks like the one that you posted, but at the same time your problem is fixed.

See the snippet below.

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <div class='container-fluid'>
    <div class='row mt-5'>
      <div class='col-3 vertical-test'>
        <nav class='navbar navbar-expand-lg navbar-light'>
          <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
              <span class='navbar-toggler-icon'></span>
            </button>
          <div class='collapse navbar-collapse' id='navbarNav'>
            <ul class='navbar-nav flex-column p-2'>
              <li class='nav-item'>
                <a class='navbar-brand active' href='#'>DIABLO DAILY</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>NEW ITEMS</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>BRANDS</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
              <li class='nav-item'>
                <a class='nav-link' href='#'>CURATED PIECES</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <div class='col-9'>
        <div class='row mb-5'>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid shadow' src='https://via.placeholder.com/120'>
          </div>
        </div>

        <div class='row'>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
          <div class='col-4'>
            <img class='img-fluid' src='https://via.placeholder.com/120'>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

divide page into one section in web design

1 Answers1