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.
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
elementType
Default'div'Override the base element
- children
node
Specifies the contents of the container
- fluid
bool
DefaulttrueFill all available space at any breakpoint
- size
enum
'xs' | 'sm' | 'md' | 'lg' | 'xl'Set the maximum width for the container. Omiting the prop will remove the max-width
- bsPrefix
string
Default'container'Overrides underlying component base CSS class name
Usage Insights#
Container
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
edx-ora2 | 21.13.1 | 1 | |
frontend-app-account | 22.9.0 | 2 | |
frontend-app-admin-portal | 21.13.1 | 18 | |
frontend-app-authn | 22.10.0 | 1 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 45 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 4 | |
frontend-app-learner-dashboard | 22.9.0 | 2 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 33 | |
frontend-app-learner-record | 22.10.0 | 1 | |
frontend-app-learning | 22.8.1 | 1 | |
frontend-app-library-authoring | 21.11.3 | 2 | |
frontend-app-ora-grading | 21.11.3 | 1 | |
frontend-app-support-tools | 21.13.1 | 11 | |
frontend-component-header-edx | 21.13.1 | 1 | |
frontend-component-header | 22.10.0 | 2 | |
catalog-search | 21.13.1 | 1 | |
frontend-lib-special-exams | 22.7.0 | 12 | |
frontend-platform | 22.8.1 | 1 | |
frontend-template-application | 22.10.0 | 1 | |
prospectus | 20.46.2 | 131 |