Loading

---Loading---

Columns Options

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage the widths of non-grid elements.

How it Works

Heads up! Be sure to read the Grid page first before diving into how to modify and customize your grid columns.

  • Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.
  • When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from a container to a row to a column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
  • Phenix includes predefined classes for creating fast, responsive layouts. With five breakpoints and a dozen columns at each grid breakpoint, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.

Sorting & Order

Use flexbox flow sorting to reverse and define how the flow of the grid will go there is three classes to sort the flow [ .flow-reverse, .flow-columns, .flow-columns-reverse], which can be used to reverse columns order, you can also use .order-* to re-order each column individually by a number from 0 to 24.

OptionxSmallSmallMediumLargexLarge
Breakpoint> 0> 576> 768> 1200> 1366
Flow prefixflow-*flow-sm-*flow-md-*flow-lg-*flow-xl-*
Order prefixorder-*order-sm-*order-md-*order-lg-* order-xl-*
Order Limit24 columns————————
Flexbox sorting responsive classes pattern.
col n1
col n2
col n3
col n1
col n2
col n1
col n2
<!-- Flow Reverse -->
<div class="row flow-reverse">
<!-- Column -->
<div class="col-4">col n1</div>
<!-- Column -->
<div class="col-4">col n2</div>
<!-- Column -->
<div class="col-4">col n3</div>
<!-- // Column -->
</div>
<!-- // Flow Reverse -->
<!-- Stacked Flow -->
<div class="row flow-columns">
<!-- Column -->
<div class="col-4">col n1</div>
<!-- Column -->
<div class="col-4">col n2</div>
<!-- // Column -->
</div>
<!-- // Stacked Flow -->
<!-- Stacked Flow Reverse -->
<div class="row flow-columns-reverse">
<!-- Column -->
<div class="col-4">col n1</div>
<!-- Column -->
<div class="col-4">col n2</div>
<!-- // Column -->
</div>
<!-- // Stacked Flow Reverse -->
order n1:n5
order n2:n1
order n3:n4
order n4:n3
order n5:none
<!-- Ordering -->
<div class="row">
<!-- Column -->
<div class="col-4 order-5">order n1:n5</div>
<!-- Column -->
<div class="col-4 order-1">order n2:n1</div>
<!-- Column -->
<div class="col-4 order-4">order n3:n4</div>
<!-- Column -->
<div class="col-4 order-3">order n4:n3</div>
<!-- Column -->
<div class="col-4">order n5:none</div>
<!-- // Column -->
</div>
<!-- // Ordering -->

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns, Phenix comes with predefined alignment classes for flexbox grids that can be applied at any specific breakpoint, or through all breakpoints at once,

Responsive Classes

flexbox has 5 different values for alignment the classes are named with each of these values : [start, center, end, space-around, space-between], which set how columns are aligned inside the row container and here is a table for the class names pattern.

FeaturexSmallSmallMediumLargexLarge
Breakpoint> 0> 576> 768> 1200> 1366
Class Prefixalign-*align-sm-*align-md-*align-lg-*align-xl-*
Vertical prefixalign-*-yalign-sm-*-yalign-md-*-yalign-lg-*-y align-xl-*-y
Horizontal prefix align-*-xalign-sm-*-xalign-md-*-xalign-lg-*-x align-xl-*-x
Self Alignment align-self-*align-self-sm-*align-self-md-* align-self-lg-* align-self-xl-*
Note : ( —— ) refer to the same value as the column before.

Alignment All [x/y]

Use flexbox alignment utilities to vertically and horizontally align columns.

align-start
align-center
align-end
<!-- Flex-Start -->
<div class="row align-start">
<!-- Column -->
<div class="col-4">align-start</div>
<!-- // Column -->
</div>
<!-- // Flex-Start -->
<!-- Flex-Center -->
<div class="row align-center">
<!-- Column -->
<div class="col-4">align-center</div>
<!-- // Column -->
</div>
<!-- // Flex-Center -->
<!-- Flex-End -->
<div class="row align-end">
<!-- Column -->
<div class="col-4">align-end</div>
<!-- // Column -->
</div>
<!-- // Flex-End -->

Horizontal alignment

Use flexbox alignment utilities to horizontally align columns.

align-start-x
align-center-x
align-end-x
align-around
align-around
align-between
align-between
<!-- Horizontal Start -->
<div class="row align-start-x">
<!-- Column -->
<div class="col-6">align-start-x</div>
<!-- // Column -->
</div>
<!-- // Horizontal Start -->
<!-- Horizontal Center -->
<div class="row align-center-x">
<!-- Column -->
<div class="col-6">align-center-x</div>
<!-- // Column -->
</div>
<!-- // Horizontal Center -->
<!-- Horizontal End -->
<div class="row align-end-x">
<!-- Column -->
<div class="col-6">align-end-x</div>
<!-- // Column -->
</div>
<!-- // Horizontal End -->
<!-- Space Around -->
<div class="row align-around">
<!-- Column -->
<div class="col-4">align-around</div>
<!-- Column -->
<div class="col-6">align-around</div>
<!-- // Column -->
</div>
<!-- // Space Around -->
<!-- Space Between -->
<div class="row align-between">
<!-- Column -->
<div class="col-4">align-between</div>
<!-- Column -->
<div class="col-6">align-between</div>
<!-- // Column -->
</div>
<!-- // Space Between -->

Vertical alignment

Use flexbox alignment utilities to vertically align columns.

align-start-y
align-center-y
align-end-y
<!-- Vertical Start -->
<div class="row align-start-y">
<!-- Column -->
<div class="col-6">align-start-y</div>
<!-- // Column -->
</div>
<!-- // Vertical Start -->
<!-- Vertical Center -->
<div class="row align-center-y">
<!-- Column -->
<div class="col-6">align-center-y</div>
<!-- // Column -->
</div>
<!-- // Vertical Center -->
<!-- Vertical End -->
<div class="row align-end-y">
<!-- Column -->
<div class="col-6">align-end-y</div>
<!-- // Column -->
</div>
<!-- // Vertical End -->

Self Alignments

Use flexbox self-alignment utilities to vertically align each column individually.

align-self-start
align-self-center
align-self-end
<!-- Self-Alignment -->
<div class="row">
<!-- Col Vertical Start -->
<div class="col-6 align-self-start">align-self-start</div>
<!-- Col Vertical Center -->
<div class="col-6 align-self-center">align-self-center</div>
<!-- Col Vertical End -->
<div class="col-6 align-self-end">align-self-end</div>
<!-- // Column -->
</div>
<!-- // Self-Alignment -->

Classes Cheatsheet

in the table below you will find all available class names for flex-box alignment you can use it with our grid system.

Vertical & HorizontalClass NameResponsive ClassElement Type
Flex-Start.align-startalign-{breakpoint}-start.row, .flexbox
Flex-Center.align-centeralign-{breakpoint}-center.row, .flexbox
Flex-End.align-endalign-{breakpoint}-end.row, .flexbox
Self-Alignment.align-self-*align-self-{breakpoint}-*.col, .col-*
Align HorizontallyClass Name Responsive ClassElement Type
Flex-Start.align-start-xalign-{breakpoint}-start-x.row, .flexbox
Flex-Center.align-center-xalign-{breakpoint}-center-x.row, .flexbox
Flex-End.align-end-xalign-{breakpoint}-end-x.row, .flexbox
Space-Around.align-aroundalign-{breakpoint}-around.row,.flexbox
Space-Between.align-betweenalign-{breakpoint}-between.row, .flexbox
Align VerticallyClass Name Responsive ClassElement Type
Flex-Start.align-start-yalign-{breakpoint}-start-y.row, .flexbox
Flex-Center.align-center-yalign-{breakpoint}-center-y.row, .flexbox
Flex-End.align-end-yalign-{breakpoint}-end-y.row, .flexbox

Table of Content