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>
);
Related
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'}}>
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>
My Owl carousel is not responsive on smaller or mobile screens. I want to find a way to solve this problem.
Following is the screenshots:
And here's the code. Thanks in advance
export default function HomeMovieSlider() {
return (
<div>
<OwlCarousel className='owl-theme'
loop center margin={1} autoplay ={true} dots={false} items={3} touchDrag={true} lazyLoad={true}
// responsive={"0:{items:1,},600:{items:3,},1000:{items:5,}"}
animateOut={'fadeOut'} animateIn={'flipInX'}>
{MOVIEBANNER.map((movieBannertop) => {
return (
<div >
{/* <h4>{movieBannerp.movieTitle}</h4> */}
{/* <img src={movieBannertop.bannerImage}/> */}
<Card style={{width: "250px"}}>
<Card.Img variant="top" src={movieBannertop.bannerImage} height="380" max-width= "100% !important"/>
<Card.Body>
<Card.Title as="h6" ><b>{movieBannertop.movieTitle}</b></Card.Title>
<Card.Subtitle className="mb-2 text-muted">{movieBannertop.genres}</Card.Subtitle>
<Link to="/MovieDetail"><small className="text-muted">More Details</small></Link>
</Card.Body>
<Card.Footer className="text-center">
<Button variant="danger" style={{backgroundColor: "#ff4444"}}><Link to="/movieBooking" style={{color: "#fff"}}>Book Now</Link></Button>
</Card.Footer>
</Card>
</div>
);
})}
</OwlCarousel>
<div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div className="prs_animate_btn1 prs_upcom_main_wrapper prs_third_slider_btn">
<ul>
<li data-animation="animated fadeInUp"><span>MORE</span>
</li>
</ul>
</div>
</div>
<div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
</div>
);
}
For making owl-carousel responsive, you should create a object named state with a responsive property and send it to the responsive prop of OwlCarousel.
export default function HomeMovieSlider() {
const state= {
responsive:{
0: {
items: 1,
},
450: {
items: 2,
},
600: {
items: 3,
},
1000: {
items: 4,
},
},
}
return (
<div>
<OwlCarousel
className="owl-theme"
loop
center
margin={1}
autoplay={true}
dots={false}
items={3}
touchDrag={true}
lazyLoad={true}
responsive={state.responsive}// add this line
animateOut={'fadeOut'}
animateIn={'flipInX'}
>
{MOVIEBANNER.map(movieBannertop => {
return (
<div>
{/* <h4>{movieBannerp.movieTitle}</h4> */}
{/* <img src={movieBannertop.bannerImage}/> */}
<Card style={{ width: '250px' }}>
<Card.Img
variant="top"
src={movieBannertop.bannerImage}
height="380"
max-width="100% !important"
/>
<Card.Body>
<Card.Title as="h6">
<b>{movieBannertop.movieTitle}</b>
</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
{movieBannertop.genres}
</Card.Subtitle>
<Link to="/MovieDetail">
<small className="text-muted">More Details</small>
</Link>
</Card.Body>
<Card.Footer className="text-center">
<Button
variant="danger"
style={{ backgroundColor: '#ff4444' }}
>
<Link to="/movieBooking" style={{ color: '#fff' }}>
Book Now
</Link>
</Button>
</Card.Footer>
</Card>
</div>
);
})}
</OwlCarousel>
);
}
For other owl-carousels APIs see this link: https://github.com/laurenchen0631/react-owl-carousel
I am building a react application in which I am trying to center the blocks,by using justify content center but its not working. I have used the justify-content-center, center -block ,but still its not working
Please Help me out
function Trackers(props) {
return (
<>
<h2 class="font-weight-bold text-center mt-4 mb-4" >COVID-19 TRACKER</h2>
<Container>
<Row >
<Col xs={12} sm={12} md={4} className="center-block">
<Card style={{ width: '15rem' }} className="justify-content-center text-center ml-1 mr-1 mt-1 mb-1" >
<Card.Body>
<h6>Infected</h6>
<h5>{props.data["statewise"][0]["active"]}</h5>
<br />
<h6>No of Active Cases of Covid-19</h6>
<Container className="bg-primary " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card></Col>
<Col xs={12} sm={12} md={4} className="justify-content-center ">
<Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1" >
<Card.Body>
<h6>Recovered</h6>
<h5>{props.data["statewise"][0]["recovered"]}</h5>
<br />
<h6>No of Recovered Cases of Covid-19</h6>
<Container className="bg-success " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card></Col>
<Col xs={12} sm={12} md={4} className="justify-content-center ">
<Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1">
<Card.Body>
<h6>Deaths</h6>
<h5>{props.data["statewise"][0]["deaths"]}</h5>
<br />
<h6>No of Deaths Cases of Covid-19</h6>
<Container className="bg-dark " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</>
);
}
https://i.stack.imgur.com/MqKYV.png
You just need to add class p-0(zero padding) to your Col and then on your Card element replace classes ml-1 mr-1 with just mx-auto (sets the margins on the x-axis, left & right to auto)
https://jsfiddle.net/85nj7tz1/
FYI .justify-content-center is used on a row to center the columns within the row.
The correct answer you already have with mx-auto.
On top of that you can also introduce h-100 on the cards to make them align properly on all screens. With a .card-footer you can align the border layout as well.
DEMO with columns
To take it a little further, you can get rid of the columns and use a card-layout.
A .card-deck seems the ideal approach.
DEMO with card-layout
i have two div login and forget password. i want on forget password login block should be hide and when login block needed forget block should be hidden. Now i able to handle forgot password block , but login block i am not able to handle. I want login block hide on click of forgot button. I have written my own code below. Can some one please suggest me how can i do that.
import React, { useEffect, useState } from 'react';
import useForm from 'react-hook-form';
import { Redirect } from 'react-router-dom';
import './loginForm.css';
const { Header, Content, Footer } = Layout;
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
if (redirect) {
return <Redirect to={routePaths.DASHBOARD} push />;
}
return (
<Layout>
<Header className="header">
<div>
<img src={logo} className="logo" />
<span className="lft">
<MessageOutlined />
</span>
</div>
</Header>
<Content className="content-screen">
<Row>
<Col xs={24} sm={24} md={8} />
<Col xs={24} sm={24} md={8}>
<div id="loginDiv" className="screen">
<Card title="Login to Relocatte" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter User Email Here..." onChange={(e) => setValue('email', e.target.value)} />
<ErrorTag errors={errors} name="email" />
</Col>
<Col style={{ padding: 10 }}>
<Input type="password" size="large" placeholder="Enter User Password Here..." onChange={(e) => setValue('encryptedPassword', e.target.value)} />
<ErrorTag errors={errors} name="encryptedPassword" />
</Col>
<Col span={7} style={{ padding: 15 }} className="forget">
Sign Up
</Col>
<Col span={7} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Login" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 }} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Forgot Password</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
</Col>
<Col xs={24} sm={24} md={8}>
{/* forgot div goes here */}
{forgotPass
&& (
<div className="screen">
<Card title="Forgot Password" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter Registered Email Here..." onChange={(e) => setValue('', e.target.value)} />
<ErrorTag errors={errors} name="" />
</Col>
<Col span={12} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Send Reset Link" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 , textAlign: "right"}} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Login</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
)}
</Col>
</Row>
</Content>
<Footer className="footer-back">
<Row>
<Col xs={24} sm={24} md={12} className="foot-child-1">
All Right Reserved© 2020 Relocatte
</Col>
<Col xs={24} sm={24} md={12} className="foot-child-2">
<span>Privacy Policy</span>
<span> | </span>
<span>Term & Conditions</span>
</Col>
</Row>
</Footer>
</Layout>
);
};
export default LoginForm;
Hi Please check this example:
import React, {useEffect, useState} from 'react';
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
function handleLogin(event) {
}
function handleForgot(event) {
setForgotPass(!forgotPass);
}
function handleReset(event) {
alert('Your password is reset');
setForgotPass(!forgotPass);
}
return (
<div>
{forgotPass ?
(<div>
Username: <input/> <br/>
<button onClick={handleReset}>Reset Password</button>
</div>)
:
(<div>
Username: <input/> <br/>
Password: <input/> <br/>
<button onClick={handleLogin}>Login</button>
<button onClick={handleForgot}>Forgot Password</button>
</div>)
}
</div>
);
};
export default LoginForm;
There are 2 ways of doing it
Using ternary operator
return (<div className="container">
{forgotPass ? <div>Forget password div </div> : <div> Login Div</div>}
</div>)
Using CSS
return (<div className="container">
<div className={forgotPass ? "show" : "hide"}>Forget password div </div>
<div className={!forgotPass ? "show" : "hide"}> Login Div</div>}
</div>)
in your css:
.show { display: 'block' }
.hide { display: 'none' }