Layout

Learn how to position elements on the screen, change their size, alignment, borders, and spacing.

Layout System

We encourage you to use flex layout when possible. Use these classes to change the display property of your components:

CSS Class Added Property
.d-flex display: flex !important
.d-inline-flex display: inline-flex !important
.d-block display: block !important
.d-inline display: inline !important
.hidden display: none !important

Add the following classes to the elements with .d-flex or .d-inline-flex to add some additional properties. Please refer to the Responsiveness page for responsive classes.

CSS Class Effect Result
.flex-column Creates a vertical stack
Item 1
Item 2
Item 3
.flex-row Creates a horizontal stack
(default behaviour)
Item 1
Item 2
Item 3
.flex-row-reverse Creates a reversed horizontal
stack
Item 3
Item 2
Item 1
.flex-wrap Forces wrapping of the items in a stack (they don't wrap by default)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
.align-items-start Aligns items to the top (or to the left if .flex-column is applied)
.align-items-center Aligns items to the center
.align-items-end Aligns items to the bottom (or to the right if .flex-column is applied)
.justify-content-start Aligns items to the top/left
Item
Item
Item
.justify-content-center Aligns items to the center
Item
Item
Item
.justify-content-end Aligns items to the end/bottom
Item
Item
Item
.justify-content-around Spreads items around
Item
Item
Item
.justify-content-between Spreads items between
Item
Item
Item

Add these classes to the child elements of .d-flex or .d-inline-flex to add some additional properties:

CSS Class Effect Result
.flex-grow Forces the element to take all available space
Item
.flex-grow
.flex-no-shrink Prevents the element from shrinking
.flex-no-shrink
.flex-grow

Use these classes to align inline elements:

CSS Class Effect Result
.vat Aligns inline element to the top
Text top aligned text
.vam Aligns inline element to the middle
Text middle aligned text
.vab Aligns inline element to the bottom
Text bottom aligned text

Sizes

All spacing for components and typography is done in 4-pixel increments. This 4px value forms the
basic unit of measurement for spacing (with some exceptions).

Add size classes to block elements to change their size.

CSS Class Result
.size-4
.size-8
.size-12
.size-14
.size-20
.size-24
.size-32
.size-40
.size-48
.size-56
.size-64
.size-72
.size-96
.size-112
.w-100
100% width
.h-100
100% height

Margins

You can add:

  • margins for all sides of the element
  • margins for individual sides: left, right, top, bottom
  • only horizontal or vertical margins
  • automatic margins (useful in flex layouts to push or center your components)
  • zero margins (to override some default margins)

All margin classes start with the m prefix followed by side (a-, l-, r-, t-, b-, x-, y-), then the value (0, 8, 24, auto, etc). Example: .mb-12

Additionally, you can include the minimum breakpoint size when the class activates. Example: .mb-lg-12 – this class adds a 12px bottom margin on screens with a width of 1080px and larger. Please refer to the Responsiveness page for responsive classes.

Margin Sides

CSS Class Sides Result
.ma-12 All
.ml-12 Left
.mr-12 Right
.mt-12 Top
.mb-12 Bottom
.mx-12 Horizontal
.my-12 Vertical

Margin Sizes

CSS Class Sides Result
.ml-0 0px
.ml-4 4px
.ml-8 8px
.ml-12 12px
.ml-16 16px
.ml-24 24px
.ml-40 40px
.ml-80 80px
.ml-auto auto

Paddings

You can add:

  • paddings for all sides of the element
  • paddings for individual sides: left, right, top, bottom
  • only horizontal or vertical paddings
  • zero paddings (to override some default paddings)

All padding classes start with the p prefix followed by side (a-, l-, r-, t-, b-, x-, y-), then the value (0, 8, 24, etc). Example: .pb-12

Additionally, you can include the minimum breakpoint size when the class activates. Example: .pb-lg-12 – this class adds a 12px bottom padding on screens with a width of 1080px and larger. Please refer to the Responsiveness page for responsive classes.

Padding Sides

CSS Class Sides Result
.pa-12 All
.pl-12 Left
.pr-12 Right
.pt-12 Top
.pb-12 Bottom
.px-12 Horizontal
.py-12 Vertical

Padding Sizes

CSS Class Sides Result
.pl-0 0px
.pl-4 4px
.pl-8 8px
.pl-12 12px
.pl-16 16px
.pl-24 24px
.pl-40 40px
.pl-80 80px

Positioning

CSS Class Added Property
.pos-rel position: relative;
.pos-abs position: absolute;
.pos-abs-centered position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
.pos-fix position: fixed;
.pos-fix-t position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1;
.pos-fix-b position: fixed;
right: 0;
left: 0;
bottom: 0;
z-index: 1;

Borders

CSS Class Effect Result
.ba Adds borders on all sides
.bt Adds top border
.br Adds right border
.bb Adds bottom border
.bl Adds left border
.ba-0 Removes all borders
.ba.bt-0 Adds borders to all sides except to the top
.ba.br-0 Adds borders to all sides except to the right
.ba.bb-0 Adds borders to all sides except to the bottom
.ba.bl-0 Adds borders to all sides except to the left
.rounded Rounds all borders (8px)
.rounded-top Rounds top borders (8px)
.rounded-bottom Rounds bottom borders (8px)
.rounded-left Rounds left borders (8px)
.rounded-right Rounds right borders
.rounded-double Rounds all borders (16px)
.rounded-top-double Rounds top borders (16px)
.rounded-bottom-double Rounds bottom borders (16px)
.rounded-left-double Rounds left borders (16px)
.rounded-right-double Rounds right borders (16px)
.circle Makes a circle/pill
Rounded corners

Images

CSS Class Effect Result
.img-cover Fills the container with the image (crops edges)
Image+Background
.img-contain Fits the image into the container (may leave transparent edges)

Scroll Areas

CSS Class Effect Result
.scroll-y Scrolls the content vertically within the container
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
.scroll-x Scrolls the content horizontally within the container
Item 1
Item 2
Item 3

Layout

Learn how to position elements on the screen, change their size, alignment, borders, and spacing.

Layout System

We encourage you to use flex layout when possible. Use these classes to change the display property of your components:

CSS Class Added Property
.d-flex display: flex !important
.d-inline-flex display: inline-flex !important
.d-block display: block !important
.d-inline display: inline !important
.hidden display: none !important

Add the following classes to the elements with .d-flex or .d-inline-flex to add some additional properties. Please refer to the Responsiveness page for responsive classes.

CSS Class Effect Result
.flex-column Creates a vertical stack
Item 1
Item 2
Item 3
.flex-row Creates a horizontal stack
(default behaviour)
Item 1
Item 2
Item 3
.flex-row-reverse Creates a reversed horizontal
stack
Item 3
Item 2
Item 1
.flex-wrap Forces wrapping of the items in a stack (they don't wrap by default)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
.align-items-start Aligns items to the top (or to the left if .flex-column is applied)
.align-items-center Aligns items to the center
.align-items-end Aligns items to the bottom (or to the right if .flex-column is applied)
.justify-content-start Aligns items to the top/left
Item
Item
Item
.justify-content-center Aligns items to the center
Item
Item
Item
.justify-content-end Aligns items to the end/bottom
Item
Item
Item
.justify-content-around Spreads items around
Item
Item
Item
.justify-content-between Spreads items between
Item
Item
Item

Add these classes to the child elements of .d-flex or .d-inline-flex to add some additional properties:

CSS Class Effect Result
.flex-grow Forces the element to take all available space
Item
.flex-grow
.flex-no-shrink Prevents the element from shrinking
.flex-no-shrink
.flex-grow

Use these classes to align inline elements:

CSS Class Effect Result
.vat Aligns inline element to the top
Text top aligned text
.vam Aligns inline element to the middle
Text middle aligned text
.vab Aligns inline element to the bottom
Text bottom aligned text

Sizes

All spacing for components and typography is done in 4-pixel increments. This 4px value forms the
basic unit of measurement for spacing (with some exceptions).

Add size classes to block elements to change their size.

CSS Class Result
.size-4
.size-8
.size-12
.size-14
.size-20
.size-24
.size-32
.size-40
.size-48
.size-56
.size-64
.size-72
.size-96
.size-112
.w-100
100% width
.h-100
100% height

Margins

You can add:

  • margins for all sides of the element
  • margins for individual sides: left, right, top, bottom
  • only horizontal or vertical margins
  • automatic margins (useful in flex layouts to push or center your components)
  • zero margins (to override some default margins)

All margin classes start with the m prefix followed by side (a-, l-, r-, t-, b-, x-, y-), then the value (0, 8, 24, auto, etc). Example: .mb-12

Additionally, you can include the minimum breakpoint size when the class activates. Example: .mb-lg-12 – this class adds a 12px bottom margin on screens with a width of 1080px and larger. Please refer to the Responsiveness page for responsive classes.

Margin Sides

CSS Class Sides Result
.ma-12 All
.ml-12 Left
.mr-12 Right
.mt-12 Top
.mb-12 Bottom
.mx-12 Horizontal
.my-12 Vertical

Margin Sizes

CSS Class Sides Result
.ml-0 0px
.ml-4 4px
.ml-8 8px
.ml-12 12px
.ml-16 16px
.ml-24 24px
.ml-40 40px
.ml-80 80px
.ml-auto auto

Paddings

You can add:

  • paddings for all sides of the element
  • paddings for individual sides: left, right, top, bottom
  • only horizontal or vertical paddings
  • zero paddings (to override some default paddings)

All padding classes start with the p prefix followed by side (a-, l-, r-, t-, b-, x-, y-), then the value (0, 8, 24, etc). Example: .pb-12

Additionally, you can include the minimum breakpoint size when the class activates. Example: .pb-lg-12 – this class adds a 12px bottom padding on screens with a width of 1080px and larger. Please refer to the Responsiveness page for responsive classes.

Padding Sides

CSS Class Sides Result
.pa-12 All
.pl-12 Left
.pr-12 Right
.pt-12 Top
.pb-12 Bottom
.px-12 Horizontal
.py-12 Vertical

Padding Sizes

CSS Class Sides Result
.pl-0 0px
.pl-4 4px
.pl-8 8px
.pl-12 12px
.pl-16 16px
.pl-24 24px
.pl-40 40px
.pl-80 80px

Positioning

CSS Class Added Property
.pos-rel position: relative;
.pos-abs position: absolute;
.pos-abs-centered position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
.pos-fix position: fixed;
.pos-fix-t position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1;
.pos-fix-b position: fixed;
right: 0;
left: 0;
bottom: 0;
z-index: 1;

Borders

CSS Class Effect Result
.ba Adds borders on all sides
.bt Adds top border
.br Adds right border
.bb Adds bottom border
.bl Adds left border
.ba-0 Removes all borders
.ba.bt-0 Adds borders to all sides except to the top
.ba.br-0 Adds borders to all sides except to the right
.ba.bb-0 Adds borders to all sides except to the bottom
.ba.bl-0 Adds borders to all sides except to the left
.rounded Rounds all borders (8px)
.rounded-top Rounds top borders (8px)
.rounded-bottom Rounds bottom borders (8px)
.rounded-left Rounds left borders (8px)
.rounded-right Rounds right borders
.rounded-double Rounds all borders (16px)
.rounded-top-double Rounds top borders (16px)
.rounded-bottom-double Rounds bottom borders (16px)
.rounded-left-double Rounds left borders (16px)
.rounded-right-double Rounds right borders (16px)
.circle Makes a circle/pill
Rounded corners

Images

CSS Class Effect Result
.img-cover Fills the container with the image (crops edges)
Image+Background
.img-contain Fits the image into the container (may leave transparent edges)

Scroll Areas

CSS Class Effect Result
.scroll-y Scrolls the content vertically within the container
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
.scroll-x Scrolls the content horizontally within the container
Item 1
Item 2
Item 3