Ant Design React. Bootstrap Grid "container" concept

Question

Is there in Ant Design for React the Bootstrap Grid "container" concept?

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

While containers can be nested, most layouts do not require a nested container.

<div class="container">
  <!-- Content here -->
</div>

Answer 1

Well, by looking through the documentation, they're grid system consists of Cols and Rows. Nothing like React-Bootstrap <Grid /> (which is component for container class)

Answer 2

Antd doesn't provide a container within it's grid system. But you can create your own container class.

Here's how you can do it:

@import "~antd/lib/style/index";

.container {
    width: 100%;
    display: flex;
    align-self: center;
    margin: auto;
}

.make-container(@minWidth, @breakpoint) {
    @media (min-width: @minWidth) {
        .container {
            max-width: @breakpoint;
        }
    }
}

.make-container(@screen-xs-min, @screen-xs);
.make-container(@screen-sm-min, @screen-sm);
.make-container(@screen-md-min, @screen-md);
.make-container(@screen-lg-min, @screen-lg);
.make-container(@screen-xl-min, @screen-xl);
.make-container(@screen-xxl-min, @screen-xxl); // Optional

then you can use the class as you would in bootstrap

<div class="container"></div>

Answer 3

Add this to some your CSS file

.container{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding-right:15px;
  padding-left:15px
}
@media (min-width: 476px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 768px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 992px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 1200px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 476px){
  .container{
    width:100%
  }
}
@media (min-width: 768px){
  .container{
    width:720px;
    max-width:100%
  }
}
@media (min-width: 992px){
  .container{
    width:960px;
    max-width:100%
  }
}
@media (min-width: 1200px){
  .container{
    width:1140px;
    max-width:100%
  }
}
@media (min-width: 1400px){
  .container{
    width:1340px;
    max-width:100%
  }
}

Answer 4

Ant Design does not provide such functionality, you'll need to create it by your own. In addition to the CSS class approach already suggested, you could also create a React component. If you are using Styled Components it'd look something like this:

import React from 'react'
import styled from 'styled-components'

export const Container = styled.div`
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;

  @media (min-width: 576px) {
    max-width: 576px;
  }

  @media (min-width: 768px) {
    max-width: 768px;
  }

  @media (min-width: 992px) {
    max-width: 992px;
  }

  @media (min-width: 1200px) {
    max-width: 1200px;
  }
`

function Container(props) {
  return <S.Container {...props} />
}

export default Container

Then you can use it as a regular React component:

<Container>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</Container>

Answer 5

You can create a container from Row and Col

For the space of the sides

<Col xs={1} sm={2}></Col>

For the content

<Col xs={22} sm={20}><Col>

the sum of the 3 must give 24

Example:

<Row>
  <Col xs={1} sm={2}></Col>
  <Col xs={22} sm={20}>
    { Content }
  </Col>
  <Col xs={1} sm={2}></Col>
</Row>

If you need more breakpoint for the responsive use the other points: xs, sm, md, lg, xl, xxl.

Answer 6

Create container component, is reusable and responsive

// src/Components/Container .jsx
import { Row, Col } from 'antd'

const Container = (props) => {

    const { children } = props

    return (<Row className='container'>
        <Col xs={1} sm={2}></Col>
        <Col xs={22} sm={20}>
          { children }
        </Col>
        <Col xs={1} sm={2}></Col>
      </Row>)
}

export default Container

Usage

// App.js
import Container from "@/Components/Container";

const App = () => {

    return(<Container>
            Content goes here
        </Container>)
}

export default App