How to make responsive grid UI in Bootstrap 5?

user_13688671 0
Viewed 516

I'm trying using below code but didn't work:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"><img src="image link"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
  </div>
</div>

Using my code getting look like this: https://i.stack.imgur.com/41tKT.png

How can I make look like this design? https://i.stack.imgur.com/JFQZs.png

bootstrap-5 css html
1 Answers

Bootstrap 5.1 has been released with an experimental CSS grid option. This would make it easier to achieve the desired layout...

  <div class="grid">
        <div class="g-col-lg-6 g-col-md-4 g-col-sm-8 g-col-12 g-row-2 bg-danger"></div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">1</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">2</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">3</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">4</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">5</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">6</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">7</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">8</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">9</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">10</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">11</div>
  </div>

/* for first block to span 2 rows */
.g-row-2 {
    grid-row: 1 / 3;
    min-height: 200px;
}

Bootstrap 5 CSS Grid

user_1714560
Related