Container

The base container to contain, pad, and center content in the viewport. This component extends the React-Bootstrap Container.
See React-Bootstrap for more documentation.

Basic Usage

<div style={{ overflowX: 'auto' }}>
    <div style={{ width: '1500px', border: 'solid 3px red' }}>
        <Container size="xl" className="bg-danger-300 my-4">
          The content in this container won't exceed the extra large width.
        </Container>
        
        <Container size="lg" className="bg-danger-300 mb-4">
          The content in this container won't exceed the large width.
        </Container>
        
        <Container size="md" className="bg-danger-300 mb-4">
          The content in this container won't exceed the medium width.
        </Container>
        
        <Container size="sm" className="bg-danger-300 mb-4">
          The content in this container won't exceed the small width.
        </Container>
        
        <Container size="xs" className="bg-danger-300 mb-4">
          The content in this container won't exceed the extra small width.
        </Container>
    </div>
</div>

<div style={{ overflowX: 'auto' }}>
    <div style={{ width: '1500px', border: 'solid 3px red' }}>
        <Container size="xl" className="bg-danger-300 my-4">
          The content in this container won't exceed the extra large width.
        </Container>
        
        <Container size="lg" className="bg-danger-300 mb-4">
          The content in this container won't exceed the large width.
        </Container>
        
        <Container size="md" className="bg-danger-300 mb-4">
          The content in this container won't exceed the medium width.
        </Container>
        
        <Container size="sm" className="bg-danger-300 mb-4">
          The content in this container won't exceed the small width.
        </Container>
        
        <Container size="xs" className="bg-danger-300 mb-4">
          The content in this container won't exceed the extra small width.
        </Container>
    </div>
</div>

Theme Variables (SCSS)#

$max-width-xs: 464px !default;
$max-width-sm: 708px !default;
$max-width-md: 952px !default;
$max-width-lg: 1192px !default;
$max-width-xl: 1440px !default;

Container Props API

as elementType
Override the base element
Default'div'
children node
fluid bool
Fill all available space at any breakpoint
Defaulttrue
size enum"xs" | "sm" | "md" | "lg" | "xl"
Set the maximum width for the container

Paragon Design System

Container

Basic Usage

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Container

Basic Usage#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage