.flex-grow-1 on react-bootstrap <Row> not filling vertical space - css

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.

Related

How to display react-bootstrap card component side by side horizontally

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>

React Bootstrap: Align col so that the col on the right will be displayed on top of the col on the left

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

why are my rows and columns slightly to the left with react-bootstrap?

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>
);
}

How to vertically align in a react-grid-system row?

I am using react-grid-system with an image and two columns for text as follows:
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
In this, I want the image and all the text to be vertically in the middle of the row. I read the documentation here but wasn't able to find anything related to vertical alignment.
There is vertical alignment in the docs it states for vertical alignment to use the align prop
<Row align="center" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
I think you should add justify attribute to Row Element with "center" value like this:-
<Row justify="center">
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
try
<div class="i-am-centered">
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
</div>
and for styling :
<style>
.i-am-centered { margin: auto; max-width: 300px;}
</style>
It helps in responsive design
<div style={{display:'grid',placeContent:"center"}}>
<Row>
<Col md={1}>
<img src=".." />
</Col>
<Col md={4}>
.....
</Col>
<Col md={7}>
....
</Col>
</Row>
</div>

Reactjs boostrap grid

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>
);

Resources