Divs below another with bootstrap 5 and not going to side - Laravel

Eder
October 23, 2022
187 views
4 votes
4 Answers

I’m trying to align a div like a gallery through a loop,
is there a way to do this efficiently with bootstrap? they just stay one above another. I tried to make more divs, but they repeat the results of first too. I’m using Laravel 9.0 and Bootstrap 5.0

@extends('master')

<body class="bg-light"></body>
<div class="container-fluid">
  <div class="px-lg-5">

    <?php

    if (!empty($sql)) {



      foreach ($sql as $value) {
    ?>
        <div class="row">
          <!-- Gallery item -->
          <div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
            <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
              <div class="p-4">
                <h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
                <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                <p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
                <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
                  <p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
                  <div class="badge badge-danger px-3 rounded-pill font-weight-normal">
                    <span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
                  </div>
                  <div>
                    <a href="" class="btn btn-primary my-1">GET</a>
                  </div>
                  <div>
                    <a href="" class="btn btn-primary mx-2">GET</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End -->

        <?php } ?>
        <!-- End -->
      <?php } ?>

        </div>
        <div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
  </div>
</div>

</body>

Answers

- OnurUslu
- October 23, 2022 at 3:09 am
- 0 votes
0
<div class="row"> shouldn’t be in the foreach loop. Each item has a single row if you use it in the foreach loop.

Find:
```
<?php
if (!empty($sql)) {
    foreach ($sql as $value) {
?>
<div class="row">
    ...
</div>
<?php
    }
}
?>
```
Replace with:
```
<div class="row">
<?php
if (!empty($sql)) {
    foreach ($sql as $value) {
?>
    ...
<?php
    }
}
?>
</div>
```
Login or Signup to reply.

In bootstap, row is a master container. col means grids inside the container.

egg:

<div class="row">
    <div class="col-md-3">
        item 1
    </div>
    <div class="col-md-3">
        item 2
    </div>
    <div class="col-md-3">
        item 3
    </div>
    <div class="col-md-3">
        item 4
    </div>
</div>

Please check here
link

Your mistake is to loop the main container.

@extends('master')

<body class="bg-light"></body>
<div class="container-fluid">
  <div class="px-lg-5">
    <div class="row">
    <?php
    if (!empty($sql)) {
      foreach ($sql as $value) {
    ?>     
          <!-- Gallery item -->
          <div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
            <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
              <div class="p-4">
                <h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
                <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                <p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
                <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
                  <p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
                  <div class="badge badge-danger px-3 rounded-pill font-weight-normal">
                    <span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
                  </div>
                  <div>
                    <a href="" class="btn btn-primary my-1">GET</a>
                  </div>
                  <div>
                    <a href="" class="btn btn-primary mx-2">GET</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End -->

        <?php } ?>
        <!-- End -->
      <?php } ?>
        </div>
        <div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
  </div>
</div>

</body>

seeing the code shows you are creating more rows with the foreach. try this code that i provided whether it will solve your issues

<div class="container-fluid"><div class="px-lg-5">
<div class="row">

<?php if (!empty($sql)) {
    foreach ($sql as $value) { ?>
      <!-- Gallery item -->
      <div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
        <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
          <div class="p-4">
            <h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
            <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity; ?></p>
            <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
              <p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price; ?></span></p>
              <div class="badge badge-danger px-3 rounded-pill font-weight-normal">
                <span class="text-dark"><?php echo substr(
                    $value->category,
                    0,
                    7
                ); ?></span>
              </div>
              <div>
                <a href="" class="btn btn-primary my-1">GET</a>
              </div>
              <div>
                <a href="" class="btn btn-primary mx-2">GET</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End -->

    <?php } ?>
    <!-- End -->
  <?php
} ?>

    </div>
    <div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>

You had closed your body tag at 2nd line.
Try this:

  @extends('master')

  <body class="bg-light">
  <div class="container-fluid">
    <div class="px-lg-5">

    <?php

    if (!empty($sql)) {



      foreach ($sql as $value) {
    ?>
      <div class="d-flex">
        <!-- Gallery item -->
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
        <div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
          <div class="p-4">
          <h5> <a href="#" class="text-dark"><?php echo $value->name; ?></a></h5>
          <p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
          <p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
          <div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
            <p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
            <div class="badge badge-danger px-3 rounded-pill font-weight-normal">
            <span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
            </div>
            <div>
            <a href="" class="btn btn-primary my-1">GET</a>
            </div>
            <div>
            <a href="" class="btn btn-primary mx-2">GET</a>
            </div>
          </div>
          </div>
        </div>
        </div>
        <!-- End -->

      <?php } ?>
      <!-- End -->
      <?php } ?>

      </div>
      <div class="py-5 text-right"><a href="#" class="btn btn-dark px-5 py-3 text-uppercase">Show me more</a></div>
    </div>
  </div>

  </body>

Please signup or login to give your own answer.

Click here to cancel reply.

Divs below another with bootstrap 5 and not going to side – Laravel

Answers