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


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


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;