0

I'm using ReactJS and iterating through an array and generating a bootstrap card for every object in the array but the cards start at the far left of the screen and they fill in left to right until they hit 5 and then creates a new row.

I would like to see if there is a way to make the first card, if there is only one, start in the center of the screen, and then populate outward as more cards get added.

Is something like that possible?

<div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
    {viewElements.map((element) => (
          <ElementItem key={element._id} element={element} />
    ))}
</div>

This is how it currently looks when there are 5 cards, and it will start on the next row. I like how that looks but when there are fewer than 5 I want them to begin populating in the center of the page, not from left to right, like the second photo shows. enter image description here

bootstrap

<section className='mt-3'>
        {viewElements ? (
          <div className='row mt-lg-3 row-cols-xs-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5 g-4'>
            {viewElements.map((element) => (
              <ElementItem key={element._id} element={element} />
            ))}
          </div>
        ) : (
          <div className='container mt-5'>
            <div className='content mt-5'>
              <div className='row'>
                <div className='row'>
                  <h3>No Elements To Display</h3>
                </div>
              </div>
            </div>
          </div>
        )}
</section>
Chris MacIsaac
  • 17
  • 5

1 Answers1

0

There is a way to arrange cards using react-bootstrap https://react-bootstrap.github.io/components/cards/#grid-cards You can play around with how many cards are in each row. You can also decide the number of rows and columns you want.

Abubakar lawwal
  • 11
  • 1
  • I already have it set to 5 cards max per row when at the large browser, but the issue is that when there is 1-4 cards they begin populating at the left side of the screen. I want them to start in the middle of the screen when there is 1 card, then move outward from there as there are more cards created. Any idea how to set that? – Chris MacIsaac Jan 11 '23 at 17:20
  • You basically want to center the cards inside the parent div. You can do that with CSS by setting the width : 100%; margin: auto; . Set the width of your choice. Margin: auto will set the left and right margins in a way to center it. There are so many ways of doing this here is a link [https://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element] – Abubakar lawwal Jan 11 '23 at 22:09