npm_versionnpm Paragon package page


Paragon's layout is controlled by the Bootstrap grid system. Documentation can be found here: Also see Layout component.


These components are pass throughs from React-Bootstrap.
See React-Bootstrap for documentation.

Any Paragon component or export may be added to the code example.


Drag the slider to add or remove columns. Edit the width and offset values for each column and see the output below.

<div className="row">
<div className="col col-3">
<div className="col col-6">
<div className="col col-3">


Rows contain columns. They are display: flex so any related flex box styles or css utilities can be leveraged here.

  • .row
  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch

Responsive variations of these utilities also exist: .{property}-{breakpoint}-{value}.

Some examples:

  • .justify-content-sm-start
  • .align-items-md-start
  • .align-items-l-between
  • .justify-content-xl-between


Columns lay on a 12 column grid.

  • .col
  • .col-${width}
  • .col-${breakpoint}-${width}
  • offset-${columns}
  • offset-${breakpoint}-${columns}


  • .col-1
  • .col-2
  • .col-3
  • .col-4
  • .col-5
  • .col-6
  • .col-7
  • .col-8
  • .col-9
  • .col-10
  • .col-11
  • .col-12
  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .flex-fill

Breakpoint Utilities

Many css utility classes have variants that apply the style only at a certain breakpoint and above.

  • Small and up -sm-
  • Medium and up -md-
  • Large and up -lg-
  • Extra Large and up -xl-


  • .col-sm-4
  • .col-md-4
  • .col-lg-4
  • .col-xl-4
  • .align-items-sm-start
  • .align-items-md-start
  • .align-items-lg-start
  • .align-items-xl-start

Display Utilities

Utility Class NameExampleDeclarations
display: none !important;
display: inline !important;
display: inline-block !important;
display: block !important;
display: table !important;
display: table-row !important;
display: table-cell !important;
display: flex !important;
display: inline-flex !important;


Utility Class NameExampleDeclarations
position: static !important;
position: relative !important;
position: absolute !important;
position: fixed !important;
position: sticky !important;
position: fixed;top: 0;right: 0;left: 0;z-index: 1030;
position: fixed;right: 0;bottom: 0;left: 0;z-index: 1030;


Utility Class NameExampleDeclarations
display: flex !important;
display: inline-flex !important;
flex-direction: row !important;
flex-direction: column !important;
flex-direction: row-reverse !important;
flex-direction: column-reverse !important;
flex-wrap: wrap !important;
flex-wrap: nowrap !important;
flex-wrap: wrap-reverse !important;
flex: 1 1 auto !important;
flex-grow: 0 !important;
flex-grow: 1 !important;
flex-shrink: 0 !important;
flex-shrink: 1 !important;
justify-content: flex-start !important;
justify-content: flex-end !important;
align-items: flex-start !important;
align-items: flex-end !important;
align-content: flex-start !important;
align-content: flex-end !important;
align-self: flex-start !important;
align-self: flex-end !important;

Max Width

Utility Class NameExampleDeclarations
max-width: 100% !important;
max-width: 464px !important;
max-width: 708px !important;
max-width: 952px !important;
max-width: 1196px !important;
max-width: 1440px !important;

Misc Layout

Utility Class NameExampleDeclarations
float: left !important;
float: right !important;
float: none !important;
overflow: auto !important;
overflow: hidden !important;