CODEWITHSUNDEEP
gridreact-bootstrap
Riya
Riya

Reputation: 425

Display grid container in the middle of the screen in React

I am trying to display container of the grid in the middle of the screen. To create Grid layout I am using a bootstrap library in React. But I am not getting the output as per expectation. Can anyone suggest me the right way to do it.

App.js

import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="container">
        <Row className="purchase-card">
          <Col>
            <h1>Hello World!</h1>
          </Col>
        </Row>
      </div>
    );
  }
}

export default App;

App.css

.container {
  margin-top: 10px;
}

.purchase-card {
  width: 350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 1em;
}

output ::

enter image description here

expected output ::

enter image description here

Upvotes: 0

Views: 855

Answers (1)

knightburton
knightburton

Reputation: 1164

I am using something like this to align the content into center:

<Container fluid>
  <Row>
    <Col xs={12} className="text-center">
      <Row className="justify-content-center">
        <Col>
          {/* your conntent goes here, the col size is depends on you */}
        </Col>
      </Row>
    </Col>
  </Row>
</Container>

Also, I'm using this when I want position everything into the middle of the screen (a login screen for example):

<Container className="vh-100" fluid>
  <Row className="h-100">
    <Col xs={12} className="my-auto text-center">
      <Row className="justify-content-center">
        <Col>
          {/* your conntent goes here, the col size is depends on you */}
        </Col>
      </Row>
    </Col>
  </Row>
</Container>

The number of rows with the justify-content-center className can appear as many times as you want to hold something.

Upvotes: 2

Related Questions