Layout Utilities

A quick reference of layout-related utility classes — display, flexbox, and position — that complement the grid and column systems.

Display

Toggle element visibility and display mode responsively with .velin-d-{value} and .velin-d-{breakpoint}-{value}.

Class                    CSS
──────────────────────────────────────
.velin-d-none            display: none
.velin-d-inline          display: inline
.velin-d-inline-block    display: inline-block
.velin-d-block           display: block
.velin-d-grid            display: grid
.velin-d-inline-grid     display: inline-grid
.velin-d-flex            display: flex
.velin-d-inline-flex     display: inline-flex

Responsive: .velin-d-{sm|md|lg|xl|2xl}-{value}

<div class="velin-d-inline velin-p-2 velin-bg-primary velin-text-white">inline</div>
<div class="velin-d-inline velin-p-2 velin-bg-info velin-text-white">inline</div>

<div class="velin-d-block velin-p-2 velin-bg-primary velin-text-white velin-mt-2">block</div>
<div class="velin-d-block velin-p-2 velin-bg-info velin-text-white velin-mt-2">block</div>

inline

block

Flexbox Utilities

Fine-tune flex containers and items with direction, wrapping, alignment, and gap utilities.

Direction
  .velin-flex-row / .velin-flex-row-reverse
  .velin-flex-column / .velin-flex-column-reverse

Wrap
  .velin-flex-wrap / .velin-flex-nowrap / .velin-flex-wrap-reverse

Justify content
  .velin-justify-content-start / -end / -center / -between / -around / -evenly

Align items
  .velin-align-items-start / -end / -center / -baseline / -stretch

Align self
  .velin-align-self-start / -end / -center / -baseline / -stretch

Gap
  .velin-gap-0 through .velin-gap-5

Grow & Shrink
  .velin-flex-grow-0 / .velin-flex-grow-1
  .velin-flex-shrink-0 / .velin-flex-shrink-1

Fill
  .velin-flex-fill

<div class="velin-d-flex velin-justify-content-between velin-align-items-center velin-gap-3 velin-p-3 velin-bg-light">
  <div class="velin-p-2 velin-bg-primary velin-text-white velin-rounded">Start</div>
  <div class="velin-p-2 velin-bg-primary velin-text-white velin-rounded">Center</div>
  <div class="velin-p-2 velin-bg-primary velin-text-white velin-rounded">End</div>
</div>

Start

Center

End

Position

Quickly set an element's CSS position value.

Class                     CSS
───────────────────────────────────────
.velin-position-static    position: static
.velin-position-relative  position: relative
.velin-position-absolute  position: absolute
.velin-position-fixed     position: fixed
.velin-position-sticky    position: sticky

Edge placement
  .velin-top-0 / .velin-top-50 / .velin-top-100
  .velin-bottom-0 / .velin-bottom-50 / .velin-bottom-100
  .velin-start-0 / .velin-start-50 / .velin-start-100
  .velin-end-0 / .velin-end-50 / .velin-end-100

Translate centering
  .velin-translate-middle
  .velin-translate-middle-x
  .velin-translate-middle-y

<div class="velin-position-relative velin-bg-light" style="height: 120px">
  <div class="velin-position-absolute velin-top-0 velin-start-0 velin-p-2 velin-bg-primary velin-text-white velin-rounded">
    Top-left
  </div>
  <div class="velin-position-absolute velin-top-50 velin-start-50 velin-translate-middle velin-p-2 velin-bg-danger velin-text-white velin-rounded">
    Center
  </div>
  <div class="velin-position-absolute velin-bottom-0 velin-end-0 velin-p-2 velin-bg-success velin-text-white velin-rounded">
    Bottom-right
  </div>
</div>

Top-left

Center

Bottom-right