Layout

Grid System

UW Credit Union uses a mobile-first, fluid grid system that scales up to 12 columns as the device or viewport size increases. Our grid system is based on the Bootstrap grid system, but uses our breakpoints (defined above) and is always fluid, which means the .container is always full-width.

Grid Rules

Rows must be placed within a .container for proper alignment and padding.
Use .rows to create horizontal groups of columns.
Content should be placed within columns, e.g. .col-xs-4, and only columns may be immediate children of rows.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, 3 equal columns would use 3 .col-xs-4.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Example: Stacked to Horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices before becoming horizontal on larger devices and desktop.

.col-md-4

View Code

Example: Responsive Column Width

Using more than one col-* class will allow you to change a column's width based on device/viewport size.

.col-xs-6 .col-md-4

.col-xs-6 .col-md-8

View Code

Example: Offsetting Columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .col-md-offset-4

View Code

Example: Column Ordering

Change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

.col-md-8 .col-md-push-4

.col-md-4 .col-md-pull-8

View Code

For more grid system examples, view the Bootstrap documentation.

Flexbox

Flexbox allows you to do a lot more to layout content or data. Centering vertically and horizontally becomes easier as well as other things.

To start using flexbox as a layout, add either .row or .flex-column to the parent container of the items you would like to flex.
Next, you have the option add to some additional classes to the parent how you would like the children to align and/or flow. Some of these you get for free by just adding .row or .flex-column (see classes tagged with "default").
Lastly, you have addtional classes you can add to the children how you would like individual children to align, grow, shrink, or be a certain column size at different breakpoints.

Flexbox Row

Direction

Use .row or .row-reverse on the parent <div> to make the children flex horizontally.

.row

View Code

.row-reverse

View Code

Row Verticle Alignment

Optional use of .align-items-* classes on the parent <div> to align the children vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is .align-items-stretch so you get this automatically with adding class .row or .row-reverse. This makes the children all of equal height and is unique to flexbox.

.align-items-flex-start

.align-items-center

.align-items-flex-end

.align-items-baseline

.align-items-stretch (default)

Row Horizontal Alignment

Optional use of .justify-content-* classes on the parent <div> to align the children horizontally.
Parent width needs to be wider than the content for this to be noticible.
Default is .justify-content-flex-start so you get this automatically with adding class .row or .row-reverse

.justify-content-flex-start (default)

.justify-content-center

.justify-content-flex-end

.justify-content-space-around

.justify-content-space-between

Row Wrap

Optional use of .flex-* classes on the parent <div> to wrap or not wrap the children.
Default is to .flex-nowrap and you get this automatically with adding class .row or .row-reverse.

.flex-nowrap (default)

.flex-wrap

.flex-wrap-reverse

Row Content Alignment

Optional use of .align-content-* classes on the parent <div> to align the content vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is .align-items-start so you get this automatically with adding class .row or .row-reverse.

.align-content-flex-start (default)

.align-content-center

.align-content-flex-end

.align-content-space-between

.align-content-space-around

Flexbox Column

Direction

Use .flex-column or .flex-column-reverse on the parent <div> to make the children flex vertically.

.flex-column

View Code

.flex-column-reversed

View Code

Column Horizontal Alignment

Optional use of .align-items-* classes on the parent <div> to align the children horizontally.
Parent needs to have a width larger than the content for this to be noticible.
Default is .align-items-stretch so you get this automatically with adding class .flex-column or .flex-column-reverse.

.align-items-flex-start

.align-items-center

.align-items-flex-end

.align-items-stretch (default)

Column Verticle Alignment

Optional use of .justify-content-* classes on the parent <div> to align the children vertically.
Parent needs to have a height larger than the content for this to be noticible.
Default is .justify-content-flex-start so you get this automatically with adding class .flex-column or .flex-column-reverse.

.justify-content-flex-start (default)

.justify-content-center

.justify-content-flex-end

.justify-content-space-around

.justify-content-space-between

Column Wrap

Optional use of .flex-* classes on the parent <div> to wrap or not wrap the children.
Default is to .flex-nowrap and you get this automatically with adding class .flex-column or .flex-column-reverse.

.flex-nowrap (default)

.flex-wrap

.flex-wrap-reverse

Column Content Alignment

Optional use of .align-content-* classes on the parent <div> to align the content horizontally.
Parent needs to have a width larger than the content for this to be noticible.
Default is .align-content-flex-start so you get this automatically with adding class.flex-column or .flex-column-reverse.

.align-content-flex-start (default)

.align-content-center

.align-content-flex-end

.align-content-space-between

.align-content-space-around

Flexbox Children

Alignment

Optional use of .align-self-* classes on the children to align the children vertically in a .row or horizontally in a .flex-column.
A .row will need to have a height larger than the content for this to be noticible.
A .flex-column will need to have a width larger than the content for this to be noticible.

.row .align-self-*

auto

flex-start

center

flex-end

baseline

stretch

.flex-column .align-self-*

auto

flex-start

center

flex-end

stretch

Grow (default is flex-grow:0)

Optional use of .flex-grow-* classes on the children.
Default is flex-grow:0 and you get this automatically with .row or .flex-column classes on the parent.

.row .flex-grow-* (1-6)

.flex-column .flex-grow-* (1-6)

Shrink (default is flex-shrink:1)

Optional use of .flex-shrink-* classes on the children.
Default is flex-shrink:1 and you get this automatically with .row or .flex-column classes on the parent.

.flex-shrink-1 (default)

.flex-shrink-0

.flex-shrink-1 (default)

.flex-shrink-1

.flex-grow-1 .flex-shrink-1

Minions ipsum tank yuuu! Ti aamoo! Hana dul sae butt ti aamoo! Underweaaar jiji tank yuuu!

Tatata bala tu ti aamoo! Belloo! Tulaliloo para tú chasy bappleees tank yuuu! Chasy jeje. Tatata bala tu gelatooo bappleees jiji underweaaar belloo! Poulet tikka masala bappleees. Gelatooo poopayee bananaaaa hahaha uuuhhh butt bappleees aaaaaah ti aamoo! Tulaliloo baboiii po kass bappleees bee do bee do bee do bee do bee do bee do daa hana dul sae bappleees bappleees hahaha. Hahaha baboiii poulet tikka masala me want bananaaa! Bee do bee do bee do tulaliloo potatoooo tank yuuu! Underweaaar jiji tank yuuu! Wiiiii tank yuuu! Tatata bala tu po kass daa me want bananaaa! Gelatooo potatoooo wiiiii jiji uuuhhh baboiii bee do bee do bee do. Pepete uuuhhh jeje belloo! Daa bananaaaa me want bananaaa!

.flex-shrink-1

.flex-shrink-1 (default) and .flex-shrink-0

.flex-shrink-0

.flex-grow-1 .flex-shrink-1

Minions ipsum tank yuuu! Ti aamoo! Hana dul sae butt ti aamoo! Underweaaar jiji tank yuuu!

.flex-shrink-0

Flexbox Columns

Using .col-* classes will allow you to change a column's width base on device/viewport size. All columns once side by side will be of equal height. This is unique to flexbox.

Example: Stacked to Horizontal

.col-xs-12 .col-md-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.col-xs-12 .col-md-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.

.col-xs-12 .col-md-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex. Proin metus enim, mattis vitae felis quis, tristique hendrerit sapien. In blandit turpis turpis. Aenean felis metus, maximus vitae pulvinar sit amet, iaculis ac nisl. Ut congue commodo enim et euismod. Mauris posuere felis auctor ante egestas sagittis ac id enim.

View Code

Example: Responsive Column Width

.col-xs-6 .col-md-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.col-xs-6 .col-md-8

View Code

Example: Stacked to Horizontal with 2nd column not having a fixed percentage at medium and above. 2nd column just fills the remaining space left over by the other columns.

.col-xs-12 .col-md-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.col-xs-12 .col-md

.col-xs-12 .col-md-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.

.col-xs-12 .col-md-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in maximus diam. Nulla fermentum convallis quam a tempus. Nulla dolor ex, ornare non ipsum vitae, sodales faucibus ex.

View Code

Example: Responsive column with 2nd column not having a fixed percentage and just fills the remaining space.

.col-xs-6 .col-md-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.col-xs

View Code

Tables

Responsive CSS Tables

Use the responsive .table-* classes to display tabular data as a table on larger devices/viewports and stacked at smaller sizes.

Responsive CSS tables use the display:table property to turn a div into a table at the specified (*) breakpoint .table-*.

Column 1

Column 2

Column 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

View Code

Apply any of the .bg-* classes to add a background color to an entire row, or an individual cell.

Column 1

Column 2

Column 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

View Code

Show Classes

Classes

.table-*

Required

An element that renders as a table at * screen sizes and above.
Currently supports XS, SM, and MD sizes.

.deco

Optional

Applies a border around the element and borders under each row when not rendering as a table.
Applies borders around each table cell when rendering as a table.

.center

Optional

Centers the table in its container.

.auto-width

Optional

Sets the width to auto so the table shrinks around its content and doesn't extend to full width

Classes

.table-header

Optional

Child of .table-*
A header row which labels the columns.
This element is visible and renders as a table row when its parent renders as a table. Otherwise it is hidden.

.bg-*

Optional

Extends .table-header
Apply a background color

Classes

.table-row

Required

Child of .table-*
An element that renders as a table row when its parent renders as a table

.deco-bottom

Optional

Adds a bottom border at all screen sizes

.deco-top

Optional

Adds a top border at all screen sizes

Classes

.table-cell

Required

Child of .table-row
An element that renders as a table cell when rendering as a tables

.full-width

Optional

A table cell that stretches to take up the maximum amount of space in a row.

.deco-left

Optional

A table cell with a left border when rendering as a table

.deco-right

Optional

A table cell with a right border when rendering as a table

.valign-middle

Optional

A table cell that vertically aligns its contents in the middle when rendering as a table

.valign-bottom

Optional

A table cell that vertically aligns its contents at the bottom when rendering as a table

Classes

.table-caption

Optional

Child of .table-*
An element that renders as a table caption when its parent renders as a table

Flex Tables

Use the responsive .flex-table-* classes to display information as a table on larger devices/viewports and stacked by column or row at smaller sizes.

Use .flex-order-* to display in columns at MD+. Use .deco-cols to apply a border around each column.

Use .column-directional as a child of .flex-table-md to position it between two columns.

Title

Detail 1

Detail 2

Detail 3

Title

Detail 1

Detail 2

Detail 3

View Code

Use .column-directional as a child of a .flex-table-cell to position it between two cells on MD+.

Title

Detail 1

Detail 2

Detail 3

Title

Detail 1

Detail 2

Detail 3

View Code

Omit .flex-order-* to display in rows at MD+. Use .deco-rows to apply a border around each row.

Title

Detail 1

Detail 2

Detail 3

Title

Detail 1

Detail 2

Detail 3

View Code

Show Classes

Classes

.flex-table-*

Required

An element that renders in a table-like fashion at * screen sizes and above
Currently supports MD only.

.deco-cols

Optional

Applies a border around the "column". Columns are stacked on mobile and side by side on MD+.

.deco-rows

Optional

Applies a border around the "row". Rows are stacked on mobile and MD+

.flex-table-cell

Required

An element that renders in a table cell-like fashion at MD+ screen sizes
Child of .flex-table-md

.flex-order-*

Required

Example: .flex-order-0, .flex-order-1
Set the order of the table cells so they arrange by column on MD+
Extends .flex-table-cell

.padded

Optional

A table cell with more padding
Extends .flex-table-cell

.padded-horizontal

Optional

A table cell with more horizontal padding
Extends .flex-table-cell

.column-directional

Optional

An element that shows direction between columns with an icon, such as an arrow, or a word, such as "OR"
Use with .flex-table-md.deco-cols
Child of .flex-table-md or .flex-table-cell

CSS Grid This is different than overall grid system/layout. (See Grid above)

CSS Grid has less mark up and allows items to take up columns AND rows. Children can be postioned pretty much anywhere without changing the markup order. Centering vertically and horizontally becomes easier as well as other things.

To start using CSS Grid as a layout, add what breakpoint you want the grid to begin .grid-* and declare the number of columns .cols-* and/or rows .rows-* on the parent container. The children will automatically be grid items.
Next, you have the option add to some additional classes to the parent how you would like the children to align and/or flow. Some of these you get for free by just adding .grid (see classes tagged with "default").
Lastly, you have addtional classes you can add to the children how you would like individual children to align, their size (.colspan-* and .rowspan-* and/or their position in the grid (.postion-col-* or .position-row-*) at different breakpoints.

Grid Basics

On the parent:

Required: Set what breakpoint the grid should begin. .grid, .grid-sm, .grid-md, .grid-lg or .grid-xl.
Declare up to 12 columns. These can be declared based on breakpoints as well. Examples: class="cols-1 cols-sm-2 cols-md-3 cols-lg-6 cols-xl-12".
Declare up to 12 rows. These can be declared based on breakpoints as well. Examples: class="rows-1 rows-sm-2 rows-md-3 rows-lg-6 rows-xl-12".
You can also declare either columns or rows and then use .auto-flow-* (See Auto Flow below)
These rules are base on the minimum breakpoint up through the next declared breakpoint. Example: .cols-md-6 will be 6 columns for md, lg and xl, unless you declare the other breakpoints.
For the xs breakpoint use .cols-* or .rows-* and then declare the larger screens sizes sm-*,-md-*, lg-* & xl-*. Examples: class="cols-1 cols-md-6 cols-lg-12"

View Code

On the children:

Use .grid_item - *Required
You can declare size of the grid item using .colspan-* and/or .rowspan-* Examples: class="colspan-4 colspan-lg-2 rowspan-4 rowspan-lg-2".
Because of IE11 not supporting auto-flow you must declare postion of the grid item using .position-col-* and/or .position-row* Examples: class="postion-row-4 postion-row-lg-2 position-col-4 postion-col-lg-2".
*Important Note: IE11 doesn't support auto-flow, so all grid items require the position to be declared.***
These rules are base on the minimum breakpoint up through the next declared breakpoint. Example: .colspan-md-6 will span 6 columns for md, lg and xl, unless you declare the other breakpoints.
For the xs breakpoint use .colspan-*, .rowspan-*, .position-row-*, .positon-col-* and then declare the larger screens sizes sm-*, md-*, lg-* & xl-*. Examples: class="colspan-1 colspan-sm-6 colspan-md-8"

.postion-col-1 .position-row-1 .colspan-2 .rowspan-6

.position-col-3 .rowspan-3

.position-col-4 .position-row-1 .rowspan-3

.position-col-5 .postion-row-1 .rowspan-6

.position-row-4 .position-col-3.rowspan-3

.position-row-4 .position-col-4.rowspan-3

.colspan-2 .rowspan-1

.colspan-2 .rowspan-3 .position-row-2

.rowspan-4

.colspan-2 .rowspan-1

.colspan-2 .rowspan-3

.colspan-2 .rowspan-1

.colspan-2 .rowspan-3 .position-col-4 .position-row-2

.rowspan-4

.colspan-2 .rowspan-1

.colspan-2 .rowspan-3

View Code

Auto Flow

Optional use of .grid-auto-flow-* classes on the parent <div> to automatically add columns or rows as needed.
For .grid-auto-flow-column, declare the number of rows and then the content will flow down the column and create additonal columns as needed.
For .grid-auto-flow-row, declare the number of columns (or max the children a set width) and then the content will flow accross the column and create additonal rows as needed.
Default is .grid-auto-flow-row

.grid-auto-flow-column

.grid-auto-flow-row (default)

Grid Gap

Optional use of .grid-column-gap, .grid-row-gap, or .grid-gap, classes on the parent <div> to give a gap between columns, rows or both.

.grid-column-gap

.grid-row-gap

.grid-gap

Aligning the Grid

Justify Content - Grid - (Horizontal Alignment)

Optional use of .justify-content-* classes on the parent <div> to align the content horizontally (row axis) .
Typically used when the grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.

.justify-content-start

.justify-content-center

.justify-content-end

.justify-content-space-between

.justify-content-space-around

.justify-content-space-evenly

Align Content - Grid - (Vertical Alignment)

Align Content is not supported by IE11 - we can begin using this when we stop supporting IE11

Optional use of .align-content-* classes on the parent <div> to align the content horizontally (row axis) .
Typically used when the grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.

.align-content-start

.align-content-center

.align-content-end

.align-content-space-between

.align-content-space-around

.align-content-space-evenly

Aligning the Children

Justify Items - All Children - (Horizontal Alignment)

Justify Items is not supported by IE11 - we can begin using this when we stop supporting IE11

Optional use of .justify-items-* classes on the parent <div> to align the children horizontally.
Default is .justify-items-stretch so you get this automatically with adding class .grid

.justify-items-start (default)

.justify-items-center

.justify-items-end

.justify-items-stretch (default)

Align Items - All Children - (Vertical Alignment)

Align Items is not supported by IE11 - we can begin using this when we stop supporting IE11

Optional use of .align-items-* classes on the parent <div> to align the ALL children vertically.
Default is .align-items-stretch so you get this automatically with adding class .grid. This makes the children all of equal height.

.align-items-start

.align-items-center

.align-items-end

.align-items-stretch (default)

Justify Self - Individual Children - (Horizontal Alignment)

Justify Self is not supported by IE11 - we can begin using this when we stop supporting IE11

Optional use of .justify-self-* classes on the child <div> to align a single child horizontally.
Default is .justify-self-stretch so you get this automatically with adding class .grid.

.justify-self-start

.justify-self-center

.justify-self-end

.justify-self-stretch (default)

Align Self - Individual Children - (Vertical Alignment)

Optional use of .align-self-* classes on the child <div> to align a single child vertically.
Default is .align-self-stretch so you get this automatically with adding class .grid.

.align-self-start

.align-self-center

.align-self-end

.align-self-stretch (default)