So I want to align the text next to the image, but here is what I get
Here is my code
<Card>
<div class='container'>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardImg src={history.image} alt={history.name} />
</div>
</div>
<div className='row'>
<div className='col-12 col-md-5 mt-3'>
<CardBody>
<CardText>{history.description}</CardText>
</CardBody>
</div>
</div>
</div>
</Card>
Any ideas?
Thanks,
Theo.
Try using flex property to container!
Using CSS:
.container {
display: flex;
}
I think you are using Bootstrap, this might be helpful to you!
Flex Property Bootstrap
Related
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 am wanting to display images in a row for this portfolio, but they are displaying in a column. I can't seem to find anything that says I am doing this wrong. Any help with this?
Here is the code:
<div className="portfolio-wrapper">
<div className="container">
<h1 className="text-center py-5">
Portfolio
</h1>
<div className="image-box-wrapper row justify-content-center">
<div className="portfolio-image-box">
<img className="portfolio-image" src={autismapp} alt="Autism Therapy app..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
{/*-*/}
<div className="portfolio-image-box">
<img className="portfolio-image" src={rasp} alt="Raspberry Pi Card Scanner..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
{/*-*/}
<div className="portfolio-image-box">
<img className="portfolio-image" src={client} alt="Client Application..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
{/*-*/}
<div className="portfolio-image-box">
<img className="portfolio-image" src={server} alt="Server Application..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
{/*-*/}
<div className="portfolio-image-box">
<img className="portfolio-image" src={github} alt="Github Projects..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>
</div>
</div>
</div>
Here is the CSS styling on the classNames. I am not sure what would make them not show as a row, but it may seem that some of my end tags may be messed up. It is difficult to tell.
.portfolio-image{
width: 15rem !important;
height: 8rem !important;
overflow: hidden;
border: 1px solid var(--primary-pink);
padding: 0 0.5rem;
}
.portfolio-image-box{
position: relative;
margin: 1rem;
overflow: hidden;
}
Please mention the CSS property you have applied on these className. Without these, it's difficult to find the issue.
I think the width of the inner div is set to 100%. Try to set the breakpoints and width of the image or the div.
Update: The className "portfolio-image-box" needs to be "portfolio-image-box col" to be recognized as apart of the grid. This is because columns are expected to be in rows.
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 Jumbotron I cannot get any to stretch to fill 100% width. Can anyone help?
I have tried "container-fluid" as well as "jumbotron-fluid" and neither has worked.
Without stepping into css styling I am hoping for any help as to why my Jumbotron won't extend to the full-width of the screen in small-to-xtra-large screen sizes.
Edits have been made to reflect the full code of the component I am attempting to improve.
function RenderCard({ item, isLoading, errMess }) {
if (isLoading) {
return (
<Loading />
);
}
else if (errMess) {
return (
<h4>{errMess}</h4>
)
}
else
return (
<FadeTransform in
transformProps={{ exitTransform: 'scale(0.5) translateY(-50%)' }}>
<div className="row justify-content-center">
<div className="col-12 col-sm-7 col-md-7 ">
<CardDeck>
<Card>
<CardBody >
<div className="text-center">
<CardImg src={baseUrl + item.image} alt="" />
<CardTitle className="bg-primary text-white">{item.name}</CardTitle>
<img src={baseUrl + item.image2} fluid="true" alt="" />
<img src={baseUrl + item.image3} alt="" />
<CardText>{item.shortDescription}</CardText>
<CardText>{item.label}</CardText>
<a href={item.link}>{item.word}</a>
</div>
</CardBody>
</Card>
</CardDeck>
</div>
</div>
</FadeTransform>
);
}
function Home(props) {
return (
<div className="container-fluid">
<div className="jumbotron">
<div className="row">
<div className="col-12 col-sm-12 col-md-6">
<h1>This doesn't make sesnes</h1>
<h5>...Lorem Ipsum</h5>
</div>
<div className=" col-12 col-sm-6 col-md-6">
<Image src={baseUrl + ("assets/logos/devLogo.png")} fluid="true" alt="Developer Image" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12">
<h2 className="text-center text-color">My Skills</h2>
</div>
<div className="row-content">
<div className="row">
<div className=" col-12 col-md-4 col-lg-4">
<h5 className="text-center text-color"> FullStack Web Development</h5>
<Fade in>
<ul className="no-bullets text-color">
...(images
</ul>
</Fade>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h5 class="text-center text-color"> Database Administration </h5>
<Fade in>
<ul class="no-bullets text-color">
... (images)
</ul>
</Fade>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h5 class="text-center text-color"> Application Development </h5>
<Fade in enterOpacity={0.95}>
<ul class="no-bullets text-color">
... (images)
</ul>
</Fade>
</div>
</div>
</div>
</div>
<h2 class="text-center text-color">Some Featured Works</h2>
<div className="row">
<div className="col-12 col-sm col-md-6">
<RenderCard item={props.project}
isLoading={props.projectsLoading}
errMess={props.projectsErrMess} />
</div>
<div className="col-12 col-sm col-md-6">
<RenderCard item={props.project1}
isLoading={props.projectsLoading}
errMess={props.projectsErrMess} />
</div>
</div>
</div>
);
}
export default Home;
...
and my css file has :
.jumbotron {
padding: 70px 30px 70px 30px;
margin: 0px auto;
background-color: #141414;
color: floralwhite;
}
Why does it only fill what seems to be 75% of the width of an entire page?
Any help greatly appreciated :)
Thank you again in advance!
<div className="container-fluid">
<header className="jumbotron ">
<div className="row">
<div className="col-12 col-sm-6 col-md-6 ">
<h1>This doesn't make sesnes</h1>
<h5...</h5>
</div>
<div className="align-self-center col-12 col-sm-6 col-md-6">
<Image src={baseUrl + ("assets/logos/devLogo.png")} fluid alt="Developer Image" />
</div>
</div>
</header>
To have the container span the full viewport width, you need to use the container-fluid class with the parent <div>
How can I edit the title lines by setting it to two lines?
In the current situation, each word is shown on one line. Instead, I wish the first word "broadcaster" was on one line, while the other "control panels" on the bottom line.
This is my code.
function IndexHeader() {
return (
<>
<div
className="page-header section-dark"
style={{
backgroundImage:
"url(" + require("assets/img/background.jpg") + ")"
}}
>
<div className="filter" />
<div className="content-center">
<Container>
<div className="title-brand">
<h1 className="presentation-title">Broadcaster control panel</h1>
</div>
<h2 className="presentation-subtitle text-center">
Pannello di controllo degli spot AdEx
</h2>
</Container>
</div>
</div>
</>
);
}
export default IndexHeader;
Thanks in advance to those who can help me!
You can try this.
<div className="title-brand">
<h1 className="presentation-title">Broadcaster</h1>
<h1 className="presentation-title">control panel</h1>
</div>
or
<div className="title-brand">
<h1 className="presentation-title">Broadcaster <br/> control panel </h1>
</div>
and you can handle that using CSS.