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">
Related
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 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>
I'm trying to align two buttons at the right corner of a row but no matter what method I use it shows the same result every time here's the code for your reference:
import React from "react";
import bootstrap from "bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const AdminPanel = () => {
const users = [{ name: "Talha" }, { name: "Ali" }];
return (
<Container className="pt-5">
<Row className="d-flex" style={{ height: "70vh" }}>
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
{user.name}
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Row>
))}
</Col>
<Col className="shadow-lg bg-white rounded mx-5">
<h1>
list
</h1>
</Col>
</Row>
</Container>
);
};
export default AdminPanel;
the result I'm getting is this:
Any help would be appreciated!!!!!
Add class: ml-auto (= margin-left:auto !important) into:
<div className="btn-group ml-auto">
As this div is in a div.row that has the property display:flex; applied, it should push it to the right automaticly
Add
className="float-right"
to the div wrapping the buttons
You can add each block of child Element of your Row in a Col Component and add the justify-content-between class to the Row Component like this
<Col className="shadow-lg bg-white rounded mx-5">
{users.map((user) => (
<Row
className="justify-content-between shadow my-3 mx-2 py-2 px-2 rounded font-weight-bold"
style={{ height: "7vh" }}
>
<Col>
{user.name}
</Col>
<Col>
<div className="btn-group">
<a href="#">
<button className="btn btn-primary">Edit</button>
</a>
<a href="#">
<button className="btn btn-danger">Delete</button>
</a>
</div>
</Col>
</Row>
))}
</Col>
I am trying to use a NavBar from react bootstrap. However there seems to be a <div class="container"> that adds width. How do I set this width to auto?
I tried the following:
.navbar > .container {
width:auto;
}
But this margin still remains. I also tried to
<Navbar style={{ width: "auto" }}>
<Navbar.Header>
...
But no success. My complete code:
<Row>
<Navbar>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</Row>
you can use only React Bootstrap Fixed top
<Navbar fixed="top" />
It will auto create the CSS below:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
You can see the this and another positions in documentation here
In your css, try the following:
.navbar > .container {
width:auto!important;
}
Just add "fluid" next to Navbar on your code
<Row>
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
If you are using the grid system you can set the Container to fluid
<Container fluid>
<NavBar />
<Row>
<div>Personal Digital Assistants</div>
<ProfileCard text="Hello" info='unknown' imageTag={AlexaImg}/>
<ProfileCard text="Sir" info='unknown' imageTag={CortanaImg}/>
<ProfileCard text="Google thing" info='known' imageTag={SiriImg}/>
</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>
);