Paragon Design System

Theme

Layout
npm_versionnpm Paragon package page

Container

Edit this pagein a new tabLeave feedbackin a new tab

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

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

    Override the base element

    Default'div'
  • children node

    Specifies the contents of the container

  • fluid bool

    Fill all available space at any breakpoint

    Defaulttrue
  • size enum"xs" | "sm" | "md" | "lg" | "xl"

    Set the maximum width for the container

  • bsPrefix string

    Overrides underlying component base CSS class name

    Default'container'

Usage Insights#

Container

Project NameParagon VersionInstance Count
edx-ora221.8.01
frontend-app-account22.0.02
frontend-app-admin-portal21.13.117
frontend-app-authn22.7.01
frontend-app-communications22.0.01
frontend-app-course-authoring22.6.136
frontend-app-enterprise-public-catalog21.13.14
frontend-app-learner-dashboard22.7.03
frontend-app-learner-portal-enterprise21.13.133
frontend-app-learner-record22.7.01
frontend-app-library-authoring21.11.32
frontend-app-ora-grading21.11.31
frontend-app-support-tools20.46.06
frontend-component-header-edx21.11.41
frontend-component-header22.7.01
catalog-search21.13.11
frontend-lib-content-components22.0.05
frontend-lib-special-exams22.2.012
frontend-platform22.6.11
frontend-template-application22.7.01
prospectus20.46.2131
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)