14

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>

5 Answers5

12

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>
Fabrizio Fenoglio
  • 5,767
  • 14
  • 38
  • 75
  • Thanks, this looks like it will work - is this SCSS? – Cameron Wilby Feb 03 '20 at 19:05
  • 3
    I dont know how to use this. I only know how to write CSS inside App.css and makeStyles or custom styles inside JS files (material UI). Can you please elaborate how to use this code? – beeftosino Aug 17 '20 at 01:56
  • @beeftosino It's `less` variables ([antd-theme](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)) , you will may need sth like `less-loader` – lamhungypl Dec 10 '21 at 10:43
7

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%
  }
}
Ekaterina Zakharenkova
  • 108
  • 1
  • 6
3

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)

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
3

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.

Alexis Sniffer
  • 51
  • 3
2

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>
Bikas
  • 856
  • 7
  • 16