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>
Related
Hi guys so I'm trying to create an web application using react-bootstrap and I wanted to change the width of my row and center it. I already make the css and js file but I cannot center the row. I tried moving my code to codesandbox and it work just fine. anyone know why ?
My code:
<Container fluid>
<Row className="roomfac fontReg">
<Col lg={3} className="text-center">
<img src="./Images/logofridge.png" alt="Logo 1"/>
<h3 className="fontSB">Fridge</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logoAC.png" alt="Logo 2"/>
<h3 className="fontSB">AC</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logowifi2.png" alt="Logo 3"/>
<h3 className="fontSB">Wifi</h3>
</Col>
<Col lg={3} className="text-center">
<img src="./Images/logotv.png" alt="Logo 4"/>
<h3 className="fontSB">TV</h3>
</Col>
</Row>
</Container>
My CSS Code:
.roomfac {
display: flex;
width: 60%;
justify-content: center;
margin: auto;
}
It is working for me too in chrome as well as edge, make sure whether your css files are included correctly or else try using inline css in jsx.
<Row style={{display:"flex",width: "60%",margin: "auto",justifyContent: "center"}} className="fontReg">
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 the Ant Grid system, It is based on 12 Grids System, and divided into 24 sections.
I need 80 sections is there any way to achieve it.
Here is the Grid
<Row>
<Col span={24}>col</Col>
</Row>
<Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>
<Row>
<Col span={8}>col-8</Col>
<Col span={8}>col-8</Col>
<Col span={8}>col-8</Col>
</Row>
<Row>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
<Col span={6}>col-6</Col>
</Row>
Demo
Go to this link https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less, You should customize your default.less file:
// Grid system
#grid-columns: 24;
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>
);
}
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>
);