Theme

npm_versionnpm Paragon package page

Layout

Paragon's layout is controlled by the Bootstrap grid system. Documentation can be found here: https://getbootstrap.com/docs/4.5/layout/grid/. Also see Layout component.

Components

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.

Grid

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">
3
</div>
<div className="col col-6">
6
</div>
<div className="col col-3">
3
</div>
</div>

Row

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

Column

Columns lay on a 12 column grid.

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

Examples

  • .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-

Examples

  • .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 NameStyles
.d-none
display: none !important;
.d-inline
display: inline !important;
.d-inline-block
display: inline-block !important;
.d-block
display: block !important;
.d-table
display: table !important;
.d-table-row
display: table-row !important;
.d-table-cell
display: table-cell !important;
.d-flex
display: flex !important;
.d-inline-flex
display: inline-flex !important;

Position

Utility Class NameStyles
.position-static
position: static !important;
.position-relative
position: relative !important;
.position-absolute
position: absolute !important;
.position-fixed
position: fixed !important;
.position-sticky
position: sticky !important;
.fixed-top
position: fixed;top: 0;right: 0;left: 0;z-index: var(--pgn-elevation-zindex-fixed);
.fixed-bottom
position: fixed;right: 0;bottom: 0;left: 0;z-index: var(--pgn-elevation-zindex-fixed);

Flexbox

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

Max Width

Utility Class NameStyles
.mw-100
max-width: 100% !important;
.mw-xs
max-width: var(--pgn-size-container-max-width-xs) !important;
.mw-sm
max-width: var(--pgn-size-container-max-width-sm) !important;
.mw-md
max-width: var(--pgn-size-container-max-width-md) !important;
.mw-lg
max-width: var(--pgn-size-container-max-width-lg) !important;
.mw-xl
max-width: var(--pgn-size-container-max-width-xl) !important;

Misc Layout

Utility Class NameStyles
.float-left
float: left !important;
.float-right
float: right !important;
.float-none
float: none !important;
.overflow-auto
overflow: auto !important;
.overflow-hidden
overflow: hidden !important;

Contents