I am trying to center some cards inside a row element but I cant get it to work!
<Row className="d-flex justify-content-center">
{cardData.map((data) => {
return (
<Col>
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={data.img} />
<Card.Body>
<Card.Title>{data.title}</Card.Title>
<Card.Text>{data.text}</Card.Text>
<Button variant="primary">{data.button}</Button>
</Card.Body>
</Card>
</Col>
);
})}
</Row>
this is how it looks:: (as you can see, there is un-event spacing on the left and right of the card
I tried to put the following classes (mx-auto,d-flex justify-content-center) on the parent row but I cant get it to work
any advice is greatly appreciated
use justify-content: space-between
<Row style={{display:'flex', justifyContent: 'space-between'}}>
Related
I Don't know how to display only two elements in row and keep last Column empty, spend almost 9h to find resolve
Red zone has to be empty, here is react component of the card
return (
<Row gutter={[24,24]}>
{
name.map((news)=>(
<Col xs={24} sm={12} lg={8} key={news.id}>
{/*<div className={"card"}>*/}
<Card hoverable className={"news-card"} style={{height: "250px"}}>
<a href={news.url} target={"_blank"} rel={"noreferrer"}>
<div className="news-image-container">
<Title className={"news-title"} level={4}>{news.name}</Title>
<img style={{maxWidth: '200px', maxHeight: '100px'}} src={news.image} alt={"news"}/>
</div>
<p>
{
news.description.length > 100 ? `${news.description.substring(0, 100)}...`
:news.description
}
</p>
<div className="provider-container">
<Text>{moment(news.datePublished).startOf('ss').fromNow()}</Text>
</div>
</a>
{/*</div>*/}
</Card>
</Col>
))
}
</Row>
);
I have this code that maps and displays my website's posts from an array.
import articleContent from '../data/articleContent';
const ArticlesList = () => (
<>
<ArticlesStyle>
<h1 className="article-h1">Nasze artykuły</h1>
{articleContent.map((article, key) =>
<Link className="article-link" key={key} to={`/artykul/${article.name}`}>
<Row className="align-items-center text-center">
<Col xs={4} md={5}>
<h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
</Col>
</Row>
<Row className="align-items-center text-center">
<Col className="text-left" xs={8} md={5}>
<p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
</Col>
</Row>
</Link>
)}
</ArticlesStyle>
</>
)
My goal is to automatically display two posts in one row (so two columns in a row I guess) on PC display and one post in a row on mobile. I tried to make some small adjustments to make it work, but I am clueless now.
This is how it looks now on PC, I can't get rid of this marked area - I think it's an issue related to display: flex;.
You can use CSS-grid for this. For web make the number of column 2 and then by using media queries in CSS you can make the number of column 1 in case of mobile width.
Ok, so I managed to solve my own problem.
First of all I added outer (outer to .map function) Row and Col. I wrapped everything inside of .map function into Container.
const ArticlesList = () => (
<>
<ArticlesStyle>
<Row>
<Col className="article-list-grid">
{articleContent.map((article, key) =>
<Container className="wrapper">
<Link className="article-link" key={key} to={`/artykul/${article.name}`}>
<Row className="align-items-center text-center">
<Col xs={true} md={true}>
<h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
</Col>
</Row>
<Row className="align-items-center text-center">
<Col xs={true} md={true}>
<p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
</Col>
</Row>
</Link>
</Container>
)}
</Col>
</Row>
</ArticlesStyle>
</>
)
After that everything comes to styling which looks like this:
const ArticlesStyle = styled.div`
.article-list-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper {
#media (max-width: 600px) {
flex: 100%;
}
#media (min-width: 900px) {
flex: 50%;
}
}
.article-link {
text-decoration: none;
}
`;
The most important thing here is flex: 50% on PC screens which result with 2 columns in a row. Everything looks as I wanted right now:
PC
MOBILE
I am new to react,
I am learning react, In this process I tried to create a for loop render using react. Were I am stuck in the following code
Below is my code
<Container>
<Row xs={3} md={4} lg={6}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col className='mt-5' key={i+1}>
<Card >
{/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
<Card.Body>
<Card.Title tag="h5">Card title</Card.Title>
<Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the
card's
content.</Card.Text>
<Button onClick={() =>addquantity({i+1},{email})}>Button</Button>
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container>
here, In the Button Onclick event I am passing the "{i+1}"
Can you help me to understand what I am doing wrong here.
Thanks in advance
When you are defining the function in the onClick, the variables are in scope and shouldn't be inserted using {...} formats.
This should work (note that email should be defined somewhere):
<Container>
<Row xs={3} md={4} lg={6}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col className='mt-5' key={i+1}>
<Card >
{/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
<Card.Body>
<Card.Title tag="h5">Card title</Card.Title>
<Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
<Card.Text>Some quick example text to build on the card title and make up the bulk of the
card's
content.</Card.Text>
<Button onClick={() =>addquantity(i+1,email)}>Button</Button>
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container>
I'm trying to implement a card component with multiple columns with the first column set as an edit button and the last column as a details button. Something like this
I'm using reactstrap library to do this but but I'm not able to set a background to the whole height of a card instead of just the column height. This is my code
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button
} from 'reactstrap';
return (<Card style={{
textAlign: "left",
margin:"3%",
padding:"3%"
}}>
<Row style={{
display: "flex"
}}>
<Col sm="3">
<CardImg top="top" style = {{width:"80%", margin: "0.1rem"}} src={logo} alt="Card image cap"/>
</Col>
<Col sm="9">
<CardBody>
<CardTitle tag="h5" style={{fontWeight:"bold"}}>Project title</CardTitle>
<Row style = {{display: "flex"}}><Col sm="6">{data.profName}</Col>
<Col sm="6">{data.dept}</Col>
</Row>
<CardText style={{color:"#000000"}}>{data.description}</CardText>
<Row style={{
display: "flex",
fontSize:"20px"
}}>
<Col sm="3" style={{alignItems:"center"}}><img src="a1.png" alt="" style={{width:"20%"}}/>{data.duration} months</Col>
<Col sm="3" style={{alignItems:"center"}}><img src="a3.png" alt="" style={{width:"20%"}}/>{data.totalSlots} students</Col>
<Col sm="3" style={{alignItems:"center"}}><img src="a2.png" alt="" style={{width:"20%"}}/>INR {data.stipend}</Col>
<Col sm="3" style={{background:"rgb(15, 135, 151)", padding:"0", margin:"0"}}>
<center>
<Link to ={"/Projects/" + data["project-uid"]}><Button style={{
backgroundColor: "#0F8797",
color: "white"
}}>Details</Button></Link>
</center>
</Col>
</Row>
</CardBody>
</Col>
</Row>
</Card>);
Which makes the Details button look like this
Why don't you try putting the buttons outside of the card? You can make a row that contains the card with a button before and a button after. The buttons will be the full height of the row, and you can make the row flex and apply flex-grow to the card, with the buttons having fixed widths.
I'm have a map nested with a map, and the nested map has an if statement. However it's not working because I need to reference a value from the outter mapped element. I'm not sure the proper syntax. I've tried many wrong things, lol.
How do I reference section.name from the outer element in the nested maps's if statement? I'm not getting any errors, it just doesn't work.
<Container>
{this.state.sections.map(section => (
<Accordion className="my-5" key={section.id} id={section.id}>
<Card key={section.id} id={section.id} name={section.name}
style={{ background: this.state.color1, color: this.state.color2 }}>
<Accordion.Toggle as={Card.Header} eventKey={section.id}>
Section {section.id}: {section.name}
</Accordion.Toggle>
<Accordion.Collapse eventKey={section.id}>
<Card.Body style={{ background: 'white', color: 'black' }}>
<ButtonGroup size="sm" className='buttons'>
{this.state.policies.map(policy => {
if(this.state.section === 'Culture'){
return
<PolicyButton key={policy.id} id={policy.id} policy=
{policy.policy} onAddPolicy={this.handleAddPolicy} />
}
})}
</ButtonGroup>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
))}
</Container>