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;
