while iterating the loop I am getting exact no of column for each row
I want to display 8 col 4 col in first row , 4 4 4 col in second row and 8 col 4 col in third row while applying loop
<div className="row">
{popularDestinations?.map((trip, index) => (
<div className= "col-lg-4 col-md-4 col-4" >
<div className="image-box">
<div className="name-desc hover-1 image-box rounded">
<img className="w-100" src={trip.image} alt="" />
<div className="hover-1-content p-2">
<div className="title text-left">
{trip.country} - {trip.price} {trip.currency}
</div>
<p className="hover-1-description mb-0">
<Link to="/country-page">
<strong>Click to Book</strong>{" "}
<i class="fa fa-angle-double-right"></i>{" "}
</Link>
</p>
</div>
</div>
</div>
</div>
))}
</div>
Related
So I have a list of categories that is parsed into my page with specific images. I am trying to get a paginated page to have a limit. In my case it only has an end for all of the images, but not for the specific category those images fit into - essentially it will over extend to blank pages for the specific category you select. how can i provide my categorized images a limit?
import Pagination from 'react-js-pagination'
....
<Fragment>
<section id="contents" className="container mt-5">
<div className="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</button>
<ul className="dropdown-menu">
{categories.map(category => (
<li
style={{
cursor: 'pointer',
listStyleType: 'none'
}}
key={category}
onClick={() => setCategory(category)}
>
<a className='dropdown-item'>{category}</a>
</li>
))}
</ul>
</div>
<div className="row" id ='cards'>
<Fragment>
<div className="col-6 col-md-9" >
{category}
<div className="row" >
{contents && contents.map(content => (
<ContCard key={content._id} content={content} col={4} />
))}
</div>
</div>
</Fragment>
</div>
</section>
{resPerPage <= contentsCount && (
<div className="d-flex justify-content-center mt-5">
<Pagination
activePage={currentPage}
itemsCountPerPage={resPerPage}
totalItemsCount={contentsCount}
onChange={setCurrentPageNo}
nextPageText={'Next'}
prevPageText={'Prev'}
firstPageText={'First'}
lastPageText={'Last'}
itemClass="page-item"
linkClass="page-link"
/>
</div>
)}
</Fragment>
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
I have date stored in Mongodb which diplays as 2005-12-03T18:30:00.000Z in frontend. But I need it in string format.
I tried using var date = new Date(2005-12-03T18:30:00.000Z).toDateString but I don't exactley know where to put this line. Please help.
{
orders.map((val, key)=>{
return <div className='bg-light mx-3 my-2 p-4 rounded-4 border border-info border-4' key={key}>
<div className='d-inline-block mx-2'>
<span className='fs-5 fw-bold'>{val.orderId}</span>
</div>
<div className='d-inline-block mx-3'>
<span className='fs-5 fw-bold'>{val.date}</span> //<--------I want date in this line
</div>
<div className='d-inline-block mx-4'>
<span className='fs-5 fw-bold'>{val.orderType}</span>
</div>
<button onClick={() => navigate(`/update/${val._id}`)} className="nav-link">Edit</button>
<button onClick={() => deleteOrder(val._id)} className="nav-link">Delete</button>
</div>
})
}
Maybe val.date part.
{
orders.map((val, key)=>{
return <div className='bg-light mx-3 my-2 p-4 rounded-4 border border-info border-4' key={key}>
<div className='d-inline-block mx-2'>
<span className='fs-5 fw-bold'>{val.orderId}</span>
</div>
<div className='d-inline-block mx-3'>
<span className='fs-5 fw-bold'>{new Date(val.date).toDateString()}</span> //<--------I want date in this line
</div>
<div className='d-inline-block mx-4'>
<span className='fs-5 fw-bold'>{val.orderType}</span>
</div>
<button onClick={() => navigate(`/update/${val._id}`)} className="nav-link">Edit</button>
<button onClick={() => deleteOrder(val._id)} className="nav-link">Delete</button>
</div>
})
}
I have a problem with bootstrap cards, when I insert the code they just line up vertically, one below the other,
I do it by mapping a response
return (
<div className="container">
{array.map(name => (
< div class="card-columns ">
<div class='col'>
<div class="card ">
<img class="card-img-top" src=name.img" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title"> name.title </h5>
<p class="card-text"> name.description</p>
</div>
</div>
</div>
</div>
))}
</div >
}
any way to align it so that it is next to each other?
please do it in this order
return (
<div className="container">
<div class="row">
{array.map((name) => (
<div class="col-sm-4">
<div class="card ">
<img class="card-img-top" src={name.img} alt="Card image cap" />
<div class="card-body">
<h5 class="card-title"> {name.title} </h5>
<p class="card-text"> {name.description}</p>
</div>
</div>
</div>
))}
</div>
</div>
}
I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>