CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
CallMeMrHyde
CallMeMrHyde

Reputation: 113

5 responsive cards per row with bootstrap 4

I may be asking a question that has already been asked but I did not manage to find a clear solution and adapt to my case:

I use bootstrap 4 and I want to display movie posters using a grid, but I would like to display 5 items per line as on the image I put below, I can display 6 items, 4 items but I can't do it for 5 items.

Example

Each item uses the bootstrap card component that I have customized.

I specify that the items are generated dynamically using a loop and that it is possible to delete one of the items, so I would not have to break my grid if I delete an item.

Thank you for your help and your answers.

Upvotes: 1

Views: 9371

Answers (2)

Raeesh Alam
Raeesh Alam

Reputation: 3490

In latest Bootstrap >= 4.4 : Use the brand new row-cols-* classes Add row-cols-5 to your row containing elements. So no custom CSS needed.
If you want to break on Extra Large+Large+Medium+Small screen as you need then use row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 in row.

Bootstrap 4.4 doc here : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Note: Check below snippet on Full Page then you can see 5 columns and resize browser then you can see breaking columns also. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid mb-4">
  <div class="row justify-content-center row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/7fec59/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f9d737/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/81f0f4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a1adfa/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/f86f6f/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ed7d31/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/a5a5a5/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/ffc000/FFFFFF" alt="...">
      </div>
    </div>
    <div class="col mt-4">
      <div class="card">
        <img src="https://via.placeholder.com/340x440/5b9bd5/FFFFFF" alt="...">
      </div>
    </div>
  </div>
</div>

Upvotes: 8

Hamzeh
Hamzeh

Reputation: 311

use this: (offset one of the columns)

    <div class="row">
        <div class="col-md-2 offset-md-1">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title 11</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-md-2 ">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions