Question 396853 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap 5 Responsive Layout cards / grid / columns, how to?

I am trying to build an HTML layout similar to the image below. I can’t seem to get there with Bootstrap 5, and keeping everything responsive.

Any help would be appreciated!

enter image description here

I attempted to make two columns, one for the large card.. and then have the smaller cards on the right. But the right column only stacked on top of each other, not side by side…

Tags:

2

Answers


  1. 0

    Bootstrap as a framework is good at solving most problems. However, it is not a solution for everything.

    The Bootstrap grid consists always of 12 columns. Your grid in the picture has 7 columns. 7 columns can’t be fit into 12 (1,2,3,4,6 could).

    So you’re left to write your own grid.

    First, you need a container and create a 7-column layout. You can do that by using this CSS:

    .container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

    next, you have to let the first block span multiple columns and rows which can be done by adding this to the first card:

    .first-card {
  grid-column: span 3;
  grid-row: span 2;
}

    If you want to have the smaller boxes as squares like in your picture, you can simply use aspect-ratio: 1;

    /* script just for creating the elements */
for (let i = 0; i < 23; i++) {
  let card = document.createElement('div');
  card.classList.add('card');
  card.textContent = i + 1;
  container.appendChild(card);
}
  
    #container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5em;
  .card {
    background-color: orange;
    color: white;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-child(1) {
      grid-column: span 3;
      grid-row: span 2;
    }
    &:not(:nth-child(1)) {
      aspect-ratio: 1;
    }
  }
}
    <div id="container"></div>

    This of course can be done responsive as well. If so, you need to provide more details on how the grid should change on certain viewports.

    Login or Signup to reply.
  2. 0

    Yes, You can create layout using bootstrap Here is code

    it is same as you shown for only more then 768px view port

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-cols">

  <!-- Example Code -->


  <div class="container text-center">
    <div class="row g-2">
      <div class="col-5">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
    </div>
    <div class="row g-2 pt-2">
      <div class="col">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
    </div>
    <div class="row g-2 pt-2">
      <div class="col">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom </div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
      <div class="col">
        <div class="p-3">Custom</div>
      </div>
    </div>
  </div>


  <!-- End Example Code -->
</body>

</html>

    fiddle link :
    https://jsfiddle.net/qnx6mjky/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search