How to make bootstrap cards be in the same line? Reactjs

Question

I've been using Bootstrap 4 for displaying data to the user.

Now I've had idea to display data in columns and rows. Frontend is ReactJS and it's fetching data from backend response. Right now I've managed to display data in the cards, but they are all over the place.

This is how my dashboard looks:

So as can you see, it's all over the place, where I need to each one be in the same line. (they are not sticking with each other)

Is there a way to fix this with only Bootstrap or is it needed to create some kind of my own css?

Here is Dashboard.js component:

import React, { useState, useEffect } from 'react';
import ArticleService from '../services/article.service';
import { Link } from 'react-router-dom';

import Pagination from 'react-js-pagination';

const Dashboard = () => {
  const [content, setContent] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await ArticleService.articles();
      setContent(res.data);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = content.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div className='container'>
      <div className='row'>
        <div className='col-sm'>
          <h4>Opis artikla</h4>
          {currentPosts &&
            currentPosts.map((item) => (
              <div key={item.id} className='card'>
                <h3>{item.descr}</h3>
                <h5>Broj kvadrata: {item.sqm}</h5>
              </div>
            ))}
        </div>
        <div classname='col-sm'>
          <h4>Cijena</h4>
          {currentPosts &&
            currentPosts.map((item) => (
              <div key={item.id} className='card'>
                <h3>{item.price}</h3>
                <h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
              </div>
            ))}
        </div>
        <div classname='col-sm'>
          <h4>Prikaži ponudu</h4>
          {currentPosts &&
            currentPosts.map((item) => (
              <div key={item.id} className='card'>
                <Link to={`/article/${item.id}`}>
                  <h5>
                    Prikaži<br></br>
                    <br></br>
                    <br></br>
                  </h5>
                </Link>
              </div>
            ))}
        </div>
      </div>
      <nav>
        <div className='w3-bar w3-xlarge'>
          <ul className='pagination justify-content-center'>
            <li className='page-item'>
              <Pagination
                hideDisabled
                hideNavigation
                hideFirstLastPages
                currentPage={currentPage}
                itemsCountPerPage={10}
                totalItemsCount={content.length}
                pageRangeDisplayed={indexOfLastPost}
                onChange={handlePageChange}
              />
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
};

export default Dashboard;

Answer 1

I think you can try using the bootstrap class - align-items-baseline on I guess the row div. Check this answer from another post to know more about this align-items-baseline property.

---

If this does not work then I think you can try this:

<div className='container'>

    <!-- First a row div with only the 3 column headings -->
    <div className='row'>
        <div className='col-4'>
            <h4>Opis artikla</h4>
        </div>
        <div classname='col-4'>
            <h4>Cijena</h4>
        </div>
        <div classname='col-4'>
            <h4>Prikaži ponudu</h4>
        </div>
    </div>

    <!-- Then the data of the 3 columns -->
    {currentPosts && currentPosts.map((item) => (

        <!-- A new row for each items data -->
        <div className='row'>

            <!-- For the first column -->
            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.descr}</h3>
                    <h5>Broj kvadrata: {item.sqm}</h5>
                </div>
            </div>

            <!-- For the second column -->
            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.price}</h3>
                    <h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
                </div>
            </div>

            <!-- For the third column -->
            <div className='col-4'>
                <div key={item.id} className='card'>
                    <Link to={`/article/${item.id}`}>
                        <h5>
                            Prikaži<br></br>
                            <br></br>
                            <br></br>
                        </h5>
                    </Link>
                </div>
            </div>

        </div>
    ))}

    <nav>
        <div className='w3-bar w3-xlarge'>
            <ul className='pagination justify-content-center'>
                <li className='page-item'>
                    <Pagination
                    hideDisabled
                    hideNavigation
                    hideFirstLastPages
                    currentPage={currentPage}
                    itemsCountPerPage={10}
                    totalItemsCount={content.length}
                    pageRangeDisplayed={indexOfLastPost}
                    onChange={handlePageChange}
                    />
                </li>
            </ul>
        </div>
    </nav>
</div>

---

Update - I tried the above code and as you said, yes it didn't work. But then I did the below code and it's working as you want it to or what I think you want it to work like:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

var currentPosts = [
  { sqm: 'One', ppm2: 'a', id: '1' },
  { sqm: 'Two', ppm2: 'b', id: '2' },
  { sqm: 'Three', ppm2: 'c', id: '3' }
];

const Dashboard = () => {

  return (
    <div className='container'>

    <div className='row'>
        <div className='col-4'>
            <h4>Opis artikla</h4>
        </div>
        <div className='col-4'>
            <h4>Cijena</h4>
        </div>
        <div className='col-4'>
            <h4>Prikaži ponudu</h4>
        </div>
    </div>

    {currentPosts && currentPosts.map((item) => (

        <div className='row mt-4 align-items-baseline'>

            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.descr}</h3>
                    <h5>Broj kvadrata: {item.sqm}</h5>
                </div>
            </div>

            <div className='col-4'>
                <div key={item.id} className='card'>
                    <h3>{item.price}</h3>
                    <h5>Cijena po kvadratu: {item.ppm2}/m2</h5>
                </div>
            </div>

            <div className='col-4'>
                <div key={item.id} className='card'>
                    {/* <Link to={`/article/${item.id}`}> */}
                        <h5>
                            Prikaži<br></br>
                            <br></br>
                            <br></br>
                        </h5>
                    {/* </Link> */}
                </div>
            </div>

        </div>
    ))}

</div>
  );
};

export default Dashboard;

You can add the pagination and other code lines to this... Actually the only change I made was to add the mt-4 and align-items-baseline classes to the row div that has the data.

The result I got from this code was: