Layout

Breakpoint

Breakpoints are based on minimum screen widths, the point where visual change occur. The syntax for each breakpoint is used throughout Cocobits utility classes such as .p-md-6 which adds a padding of 40px at the medium breakpoint.

<div class="p-0 p-sm-6">...</div>

Column

The grid can be adjusted using column utility classes of percentage-based widths. The grid is based on 12 columns and is responsive. For example, col-md-1 is 1/12 of the parent element's width at the medium breakpoint.

Column Width

<div class="col-sm-12">...</div>

Fixed Column Width

<div class="col-12">...</div>

Offset Column Width

<div class="offset-sm-1 col-11">...</div>

Fixed Offset Column Width

<div class="offset-1 col-11">...</div>

Fixed Column Gutter

Gutter utility classes defines the space padding between elements with col- utility class.

<div class="d-flex gutter-wide">
    <div class="col-4" >...</div>
    <div class="col-4" >...</div>
    <div class="col-4" >...</div>
</div>

Width & Height

Fixed Height

Height utility classes are useful when requiring consistent heights such as borders or input fields.

<div class="height-5">...</div>

Max Width & Height

Min-Width

Fixed breakpoint widths is useful for displaying collection of items with a horizontal scroll.

<div class="width-fit">...</div>

Display

Display of an element can be adjusted with utilities like d-block, d-grid and d-flex.

Flexbox

Flex Row & Reverse

<div class="d-flex flex-sm-row gap-flex-col-2">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Flex Column & Column Reverse

<div class="d-flex flex-sm-col-reverse gap-flex-row-reverse-2">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Flex Wrap & Nowrap

<div class="d-flex flex-sm-wrap-reverse gap-flex-2">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Flex Grow & Shrink

<div class="d-flex gap-flex-col-2">
    <div>...</div>
    <div class="flex-sm-1">...</div>
    <div>...</div>
</div>

Flex Order

<div class="d-flex">
    <div class="flex-sm-order-2"> 1 </div>
    <div class="flex-sm-order-none"> 2 </div>
    <div class="flex-sm-order-1"> 3 </div>
</div>

Fixed Flex Properties

Flex Gap

Flexbox gaps between elements are not widely supported by browsers so the gap utility classes are a temporary workaround.

<div class="d-flex flex-wrap gap-flex-2">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
</div>

Flex Row Gap

The gap-{breakpoint}-flex-row-{integer} adds a gap between rows. gap-{breakpoint}-flex-row-reverse-{integer} can be used for flex reverse rows.

<div class="d-flex flex-sm-col gap-sm-flex-row-3">
    <div class="py-2 col-12">...</div>
    <div class="py-2 col-12">...</div>
    <div class="py-2 col-12">...</div>
</div>

Flex Column Gap

The gap-{breakpoint}-flex-col-{integer} adds a gap between columns. gap-{breakpoint}-flex-col-reverse-{integer} can be used for reverse flex columns.

<div class="d-flex flex-row gap-sm-flex-col-3">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
</div>

Fixed Flex Gap

Fixed versions of the flex gaps are available as well as reverse flex gaps such as gap-flex-col-reverse-{integer} and gap-flex-row-reverse-{integer}.

Grid

Grid Flow Direction

Set the direction of the display element using the grid flow utility classes.

Grid Auto Size

Specifies the size of an implicitly-created grid row or column.

Grid Repeat Column

Create repeat of equal width elements using the grid column utility classes.

<div class="d-grid grid-sm-col-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Fixed Grid Repeat Column

<div class="d-grid grid-col-4">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Grid Gap

The grid gap utility classes add equal width margins between display grid columns and rows.

<div class="d-grid grid-col-4 gap-sm-6">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Grid Row Gap

The gap-{breakpoint}-row-{integer} adds a gap between rows.

<div class="d-grid grid-col-1 gap-row-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Grid Column Gap

The gap-{breakpoint}-col-{integer} adds a gap between columns.

<div class="d-grid grid-col-4 gap-sm-col-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Fixed Grid Gap

Fixed versions of the grid gaps are available using the gap-{integer}, gap-row-{integer} and gap-col-{integer} classes.

Align

Display align utility classes aligns elements within flex and grid boxes.

Justify Content

Aligns elements by adjusting the gap size along the main axis.

<div class="d-grid d-sm-justify-evenly grid-flow-col">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Justify Items

Aligns elements by adjusting the padding within its container along the main axis.

<div class="d-grid grid-col-3 d-sm-align-center">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Align Content

Align elements that wrap by adjusting the gap size along the cross axis.

<div class="d-grid grid-col-2 d-sm-content-around">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Align Inline-items

Align elements that wrap by adjusting the padding within its container along the cross axis.

<div class="d-grid grid-col-2 d-sm-items-center">
    <div>...</div>
</div>

Align Self

Align self by adjusting the margin within its container along the cross axis.

<div class="d-grid grid-flow-col gap-1">
    ...
    <div class="d-sm-self-center">...</div>
    ...
</div>

Fixed Align

Float

<div class="float-sm-right">
    <div>...</div>
    <div>...</div>
</div>

Clearfix

The clearfix property clears the left and right side of the floating element.

<div class="clearfix">
    <div class="float-sm-right">...</div>
    ...
</div>

Overflow

Use the overflow utility classes to control content that is larger than its container.

<div class="overflow-sm-scroll">
    <p>...</p>
</div>

Position

Top, Right, Bottom & Left

<div class="position-relative">
    <div class="position-absolute top-0">...</div>
</div>

Z-index

The z-index property can be used to set the stack order of elements. The higher stack order number is always in front of the element with the lower stack order number.

<div class="position-relative">
    <div class="position-absolute zindex-01">...</div>
</div>