I am learning React and I have some trouble with using the bootstrap grid/reactstrap. Somehow when I use the grid system, instead of aligning horizontal columns, I got a vertical one.
Film.js
import React from "react";
import logo from "./ghibli.png";
import { Container, Row, Col } from "reactstrap";
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button } from 'reactstrap';
const Films = props => (
<Container>
<Row>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
export default Films;
Currently, you only have one column (col) in a row.
As soon as you add more than column into a row, they'll start showing up side by side i.e. horizontally.
I have no clue about reactjs but I suspect that the following code will probably do the trick and produce 2 columns in a row:
const Films = props => (
<Container>
<Row>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
Related
Hi guys so I'm trying to create some e-commerce web app using react-bootstrap. I wanted to map my item by using Card component from bootstrap. I manage to display each of the card, but I can't make them displayed side by side horizontally. I want each row to have 4/5 items anyone know how I can accomplish it ? here's my code:
Product.js
<Row>
<Col lg={4}>
{productList && productList.map(product =>{
const {id, title, price, category,description,image} = product;
return(
<>
<Card key={id} className="productlist">
<Card.Img variant="top" src={"#"} />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Text>{description}</Card.Text>
<Card.Text>{category}</Card.Text>
<Card.Text>
{price}
</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</>
)
})}
</Col>
</Row>
You can do it simply using d-flex and flex fill react bootstrap class. It will also fulfill your need of equal height cards in a row.
Try below code may be its work as expected you want.
<Row lg={3}>
{productList &&
productList.map((product) => {
const { id, title, price, category, description, image } =
product;
return (
<Col className="d-flex">
<Card className="flex-fill" key={id} className="productlist">
<Card.Img variant="top" src={"#"} />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Text>{description}</Card.Text>
<Card.Text>{category}</Card.Text>
<Card.Text>{price}</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</Col>
);
})}
</Row>
<Row>
{productList &&
productList.map((product) => {
const { id, title, price, category, description, image } =
product;
return (
<Col className="col-6">
<Card key={id} className="productlist">
<Card.Img variant="top" src={"#"} />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Text>{description}</Card.Text>
<Card.Text>{category}</Card.Text>
<Card.Text>{price}</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</Col>
);
})}
</Row>
I have cards with different images and texts that make them bigger/smaller, I couldn't find any React-Bootstrap specific answer, but every css and normal Bootstrap alternative that i tried didn't work. The only thing that put a patch in the problem is setting a max height in the cards, but still the cards that have a larger image or text have their image higher or lower and is really bad for rows that have some medium sized images and one larger one. For example:
I tried adapting the top three answers of this answer: Link and it didn't work, for example using d-flex align-items-stretch
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container>
<Row>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[0]}></Product>
</Col>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[1]}></Product>
</Col>
<Col className="d-flex align-items-stretch">
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
The result is every card having their own size.
Using h-100 nothing changes, container code:
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container fluid className="content-row">
<Row>
<Col>
<Product product={props.productList[0]}></Product>
</Col>
<Col>
<Product product={props.productList[1]}></Product>
</Col>
<Col>
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
Card code:
import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";
const Product = (props) => {
console.log(props.product);
return (
<div>
<Card className="card rounded shadow-sm border-0 h-100">
<Card.Body className="card-body p-4">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
</div>
);
};
export default Product;
And using d.flex and flex-fill also nothing changes, container:
import React from "react";
import Product from "./product";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Flexbox = (props) => {
return (
<Container fluid>
<Row>
<Col className="col-sm d-flex">
<Product product={props.productList[0]}></Product>
</Col>
<Col className="col-sm d-flex">
<Product product={props.productList[1]}></Product>
</Col>
<Col className="col-sm d-flex">
<Product product={props.productList[2]}></Product>
</Col>
</Row>
</Container>
);
};
export default Flexbox;
Card:
import React from "react";
import "../App.css";
import "../stylesheets/product.css";
import Rating from "./rating";
import Card from "react-bootstrap/Card";
const Product = (props) => {
console.log(props.product);
return (
<div>
<Card className="card rounded shadow-sm border-0">
<Card.Body className="p-4 flex-fill">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
</div>
);
};
export default Product;
I'm losing my mind and i don't know what to do, i tried everything and nothing changes.
I think if you remove the div around the card and add back h-100 as a class it should align:
const Product = (props) => {
console.log(props.product);
return (
<Card className="card rounded shadow-sm border-0 h-100">
<Card.Body className="p-4 flex-fill">
<img src={props.product.img} class="img-fluid d-block mx-auto mb-3" />
</Card.Body>
<Card.Footer>
<h5>{props.product.name}</h5>
<Rating></Rating>
</Card.Footer>
</Card>
);
};
export default Product;
I'm wondering if there's a way with React Bootstrap to display two columns next to each other, but whenever the screen gets smaller, display the column on the right on top of the col on the left instead of the other way around.
Here's my code:
import "./styles.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Row>
<Col sm={8}>
<Card>
<Card.Body>
<Card.Title>Left Card/Bottom Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col sm={4}>
<Card>
<Card.Body>
<Card.Title>Right Card/Top Card</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
</div>
);
}
Also, here's a link to the codesandbox
Yes, use the order classes..
<Container className="App" fluid={true}>
<Row>
<Col sm={8} className="order-last order-sm-first">
<Card>
...
</Card>
</Col>
<Col sm={4}>
<Card>
...
</Card>
</Col>
</Row>
</Container>
Codeply
I'm struggling to get .flex-grow-1 in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to get a component on my layout to expand to fill the remaining vertical space available.
"bootstrap": "^4.6",
"react-bootstrap": "1.5.2",
The following code produces a wireframe of the screen layout that I am trying to build.
import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import './SingleSignIn.scss'
class SignUpLayout extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const { country } = this.state;
return (
<Row>
<Col id="left-column" className="grid bg-warning" style={{height: "100vw"}}>
<Row className="grid flex-nowrap">
<Col className="grid">
{/* left margin */}
</Col>
<Col className="grid" xs={6} sm={6} md={6} lg={6} xl={6}>
<Row className="grid" style={{height: "80px"}}>
Welcome To:
</Row>
<Row className="grid" style={{height: "125px"}}>
logo goes here
</Row>
</Col>
<Col className="grid">
{/* right margin */}
</Col>
</Row>
<Row id="body" className="grid bg-danger flex-grow-1 flex-nowrap">
<Col className="grid">
{/* body left margin */}
</Col>
<Col className="grid" xs={10} sm={10} md={8} lg={8} xl={8}>
<Row className="grid" style={{height: "10%"}}>
e-mail input
</Row>
<Row className="grid" style={{height: "10%"}}>
company name input
</Row>
<Row className="grid" style={{height: "10%"}}>
country input
</Row>
<Row className="grid" style={{height: "10%"}}>
phone number
</Row>
<Row className="grid" style={{height: "10%"}}>
get started button
</Row>
</Col>
<Col className="grid">
{/* body right margin */}
</Col>
</Row>
</Col>
<Col id="right-column" className="grid" style={{height: "100vw"}}>
Right Column
</Col>
</Row>
)
}
}
export default SignUpLayout;
My intention is to get the component identified as #body to grow vertically to fill the remaining vertical space available on the viewport. I'm using the .flex-grow-1 class to try to accomplish this based on other similar posts that I came across in my search but it's not having the desired effect.
The resulting wireframe layout that I get from the above code is the following:
Thanks in advance for the pointers.
I'm using react-bootstrap to make my website responsive. I've used react-bootstrap before and I always encounter this problem: when setting my rows and cols they're slightly to the left and not centered, as if there were no margin. I've used class names to center the whole row, but it's just not responding like I want it to. This is my code and there is no css going on yet
const Projects = () => {
return (
<div className='Projects' >
<Row className='mt-5 pt-5 my-auto'>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
</Row>
</div>
);
}
Here's what it looks like It's slightly to the left and has some space on the right. Any help is appreciated!
The Bootstrap grid must be wrapped in a <Container>:
const Projects = () => {
return (
<Container className='Projects' >
<Row className='mt-5 pt-5 my-auto'>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
</Row>
</Container>
);
}