title: Layout

Layout

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

Components

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

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 NameExampleDeclarations
.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 NameExampleDeclarations
.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: 1030;
.fixed-bottom
position: fixed;right: 0;bottom: 0;left: 0;z-index: 1030;

Flexbox

Utility Class NameExampleDeclarations
.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 NameExampleDeclarations
.mw-100
max-width: 100% !important;
.mw-xs
max-width: 464px !important;
.mw-sm
max-width: 708px !important;
.mw-md
max-width: 952px !important;
.mw-lg
max-width: 1196px !important;
.mw-xl
max-width: 1440px !important;

Misc Layout

Utility Class NameExampleDeclarations
.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;