I have the following code for a card to that I want to center vertically:
import React from 'react';
import {
Card,
CardHeader,
CardBody,
CardTitle,
Row,
Col,
Container
} from "reactstrap";
const Login = () => {
return(
<Container className="d-flex h-100">
<Row className="justify-content-center align-self-center">
<Col>
<Card>
<CardHeader>
<CardTitle>
Login
</CardTitle>
</CardHeader>
<CardBody>
do something
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
};
export default Login;
However the result is as follows:
Anyone have any ideas why it isn't working?
I think what you want is vh-100 for viewport units. I suspect the containing box of Container is not set to take up the viewport
<Container className="d-flex vh-100">
<Row className="m-auto align-self-center">
<Col>
<Card>
<CardHeader>
<CardTitle>Login</CardTitle>
</CardHeader>
<CardBody>do something</CardBody>
</Card>
</Col>
</Row>
</Container>
Related
I am trying to get react bootstrap cards to show only card per row when the screen is small but it shows a mix of one and three cards per row . Please help.....example code is below
return (
<Container className="align-middle g-0 bg-transparent">
<Card.Body>
<Row className="justify-content-center">
{
cards.map((card) => {
return (
<Col className="col-lg-3 col-md-6 col-sm-12 col-xs-12">
<CardComponent data={data} />
</Col>
)
})
}
</Row>
</Card.Body>
</Container>
)
Instead of using className use the Bootstrap default way of defying columns, otherwise it adds a default col class
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Container className="align-middle g-0 bg-transparent">
<Card.Body>
<Row className="justify-content-center">
{cards.map((card) => (
<Col xs='12' md='6' lg='3'>
{card}
</Col>
))}
</Row>
</Card.Body>
</Container>
</div>
);
I'm trying to implement React-Bootstrap to my application and somehow it does not render.
This is the code that I have tried:
import React from 'react';
import { CardGroup, Card, Button, Container, CardImg, ListGroup, ListGroupItem, Row, Col } from 'react-bootstrap';
export class MovieView extends React.Component {
render() {
const { movie, onBackClick } = this.props;
return (
<Container>
<Row>
<Col>
<CardGroup>
<Card>
<CardImg className="movie-view movie-poster" src={movie.ImagePath} />
<Card.Body>
<Card.Title className="movie-title value">{movie.Title}</Card.Title>
<Card.Text className="movie-description value">{movie.Description}</Card.Text>
</Card.Body>
<Card.Body>
<ListGroup>
<ListGroupItem className="movie-genre">{movie.Genre.Name}</ListGroupItem>
<ListGroupItem className="movie-director">{movie.Director.Name}</ListGroupItem>
</ListGroup>
<Button variant="Primary" onClick={() => { onBackClick(null); }}>
Back
</Button>
</Card.Body>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
);
}
}
If not, try adding this line in your src/index.js or App.js file
import 'bootstrap/dist/css/bootstrap.min.css';
See this documentation
I am new to react,
I am using card, when card "on click" i need to get the card object and place it in form dynamically,
(full code)
My code:
// reactstrap components
import {useState} from "react"
import {
Card,
CardHeader,
CardBody,
CardTitle,
Col,
Input,
FormGroup,
Form,
Container,
Row,
UncontrolledDropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
Button,
} from "reactstrap";
import Header from "components/Headers/Header.js";
import 'react-toastify/dist/ReactToastify.css';
import Navbar from "components/Navbars/modulenavbar"
import axios from "axios";
import React from "react";
import { Link } from "react-router-dom";
var apitoken= localStorage.getItem('apitoken');
const api=axios.create({baseURL:"https://api/v1/account"})
const options = {
headers: {'Authorization': apitoken}
}
const Accounts = () => {
const [accounts, setaccount] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [disabled, setDisabled] = useState(false);
React.useEffect(async () => {
const response = await api.get("/",options);
setaccount(response.data.response);
setLoading(false);
}, []);
if (loading) {
return <>Loading...</>;
}
function handleGameClick() {
setDisabled(!disabled);
}
This is were i get all my api value and append it
return (
<>
{accounts.map((student, index) => {
const { id, name, phone, email } = student //destructuring
return (
<>
<div style={{ width: "18rem" }} onClick={() => console.log(student)}>
I want to pass the object "Student" and use it in the default value of the forms shown below
<Card className="card-stats mb-4 mb-lg-1">
<CardBody>
<Row>
<div className="col">
<CardTitle className="h4 font-weight-bold mb-0">
{name}
</CardTitle>
<span className="h5">{phone}</span>
</div>
<div className="col">
<span className="h5">{email}</span>
</div>
</Row>
</CardBody>
</Card>
</div>
</>
)
})}
</>
)
}
Form Shows here
const Display = () => {
return (
<>
<Header />
<Container className="mt--7" fluid>
{/* Table */}
<Row>
<Col className="order-xl-1 " xl="2">
<CardHeader className="bg-white border-0">
<Row className="align-items-center">
<Col xs="8">
<Link to="/admin//accounts" className="ni ni-bold-left">
<span> View Account</span></Link>
</Col>
</Row>
</CardHeader>
<Card className="bg-secondary shadow navbar-nav-scroll">
<Accounts/>
</Card>
</Col>
<Col className="order-xl-1" xl="10">
<Card className="bg-secondary shadow">
<Navbar/>
<Row >
<Col className="shadow navbar-nav-scroll">
<Form>
<h6 className="heading-small text-muted mb-4">
Account Information
</h6>
<div className="pl-lg-4">
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Account Name
</label>
<Input
className="form-control-alternative"
id="input-username"
placeholder="Username"
type="text"
defaultValue={student.value}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Email address
</label>
<Input
className="form-control-alternative"
id="input-email"
placeholder="jesse#example.com"
type="email"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Phone
</label>
<Input
className="form-control-alternative"
id="input-phone"
placeholder="Phone"
type="text"
/>
</FormGroup>
</Col>
</Row>
</div>
</Form>
</Col>
<Col xs="9">
<Card className="card-stats mb-4 mb-lg-0">
<CardBody>
<div>
<Row className="align-items-center">
<Col xs="8">
</Col>
<Col className="text-right" xs="4">
<Button
color="success"
href="#pablo"
// onClick={save}
>
Save
</Button>
</Col>
</Row>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Card>
</Col>
</Row>
</Container>
</>
);
};
export default Display;
Note:The above three sections of code is in the single component
I just want to dynamically append the values from object during "on click" event
Thanks in advance
You can store the clicked student value in state and pass it on to whichever component needs it as props
const Accounts = () => {
const [selectedStudent, setSelectedStudent] = useState({});
...
const handleStudentClick = (student) => {
setSelectedStudent(student)
}
return (
<>
{accounts.map((student, index) => {
const { id, name, phone, email } = student //destructuring
return (
<>
<div style={{ width: "18rem" }} onClick={() => handleStudentClick(student)}>
Now you can pass selected student as props to your child component
I have a structure which consists:
an image horizontally stacked with a text array which are vertically stacked like this:
Here is the snippet for the same:
import React from "react";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</div>
);
}
What I want to achieve is on reducing the screensize, the text should move below the image, but what I actually get is this:
By using Bootstrap classes I managed to make a responsive navbar... but I wanted the same with my this section as well. Does anyone have any suggestions for the same?
For reproducing goto this link
Use Row and Col components to create responsive grids.
...
import { Row, Col } from "react-bootstrap";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Body-wrapper">
<Row>
<Col sm={12} md={6}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
</Col>
<Col sm={12} md={6}>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</Col>
</Row>
</div>
</div>
);
}
So i want to create hyperlinks for my footer which will redirect me to specific links first i used Link but it gives me an error telling me that i cannot use Link outside the Router so help me with that here is my current footer component.
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCopyright } from '#fortawesome/free-solid-svg-icons';
import { Row, Col, Container } from 'react-bootstrap';
import logo from '../assets/SE-logo.png';
export const Footer = () => (
<div style={{marginTop:'1em', width:'100%'}}>
<Container fluid>
<Row>
<Col md lg>
<div id="footerFD">
<p style={{fontSize:"40px", fontWeight:"500", color:"#fb7840"}}>Got a project?<br/>
<span style={{fontSize:"30px", fontWeight:"300", color:"#fff"}}>We want to hear about it.</span></p>
<div id="footerSD">
<Row>
<Col lg md id="colF">
<Row>
<Col-4 md lg>
<p style={{fontSize:"20px", fontWeight:"300"}}> (+789) 132 4657</p>
</Col-4>
<Col md lg>
<p style={{fontSize:"20px", fontWeight:"300"}}>example#example.com</p>
</Col>
</Row>
</Col>
</Row>
</div>
</div>
</Col>
<Col md lg>
<div id="footerFD2">
<div>
<img src={logo} alt="logo" id="footerLogo"/>
</div>
<div id="footerSD2">
<Row>
<Col md lg><p>Home</p></Col>
<Col md lg><p>Services</p></Col>
<Col md lg><p>Projects</p></Col>
<Col md lg><p>Contact</p></Col>
</Row>
</div>
</div>
</Col>
</Row>
</Container>
<p style={{marginTop:'1em', width:'100%', textAlign:'center'}}>Developed By <span style={{color:'#fb7840'}}>Hassan Uddin Sheikh</span><br/>All Rights Reserved <FontAwesomeIcon icon={faCopyright}/> 2020</p>
</div>
)
You need to wrap your app in browser router like so:
<BrowserRouter>
<App />
</BrowserRouter>
The link cannot stand on its own without a browser router wrapper somewhere higher up.
Reference: https://reacttraining.com/react-router/web/api/BrowserRouter
I use Nav.Link instead and it works
<Nav>
<Nav.Item>
<Nav.Link href="/"></Nav.Link>
<Nav.Item>
</Nav>