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
Show editable code example
Any Paragon component or export may be added to the code example.
<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;
Props API#
Container Props API
- as
elementTypeDefault'div'Override the base element
- children
node - fluid
boolDefaulttrueFill all available space at any breakpoint
- size
enum"xs" | "sm" | "md" | "lg" | "xl"Set the maximum width for the container
Usage Insights#
Container
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| edx-ora2 | 20.9.2 | 1 | |
| frontend-app-admin-portal | 20.26.3 | 12 | |
| frontend-app-authn | 20.36.2 | 1 | |
| frontend-app-communications | 20.30.1 | 1 | |
| frontend-app-course-authoring | 20.32.0 | 2 | |
| frontend-app-enterprise-public-catalog | 20.29.0 | 4 | |
| frontend-app-learner-dashboard | 20.32.0 | 2 | |
| frontend-app-learner-portal-enterprise | 20.36.0 | 37 | |
| frontend-app-learner-record | 20.32.0 | 1 | |
| frontend-app-library-authoring | 20.30.1 | 2 | |
| frontend-app-ora-grading | 20.30.0 | 1 | |
| frontend-app-profile | 20.32.0 | 1 | |
| frontend-app-support-tools | 20.26.0 | 8 | |
| catalog-search | 19.25.1 | 1 | |
| frontend-lib-content-components | 20.34.0 | 5 | |
| frontend-lib-special-exams | 20.22.4 | 12 | |
| frontend-platform | 20.30.1 | 1 | |
| frontend-template-application | 20.32.0 | 1 | |
| prospectus | 20.32.3 | 91 |