Example

CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built withflexbox in newwindow and is fully responsive. Below is an example and an in-depth explanation for how the gridsystem comes together.

The above example creates three equal-width columns across all devices and viewports using our predefined gridclasses. Those columns are centered in the page with the parentc-container.

How it works

Breaking it down, here's how the grid system comes together:

• Our grid supports six responsive breakpoints. Breakpoints are based onmin-width media queries, meaning theyaffect that breakpoint and all those above it (e.g.,[sm]="4" applies tosm,md,lg,xl, andxxl). Thismeans you cancontrol container and column sizing and behavior by each breakpoint.
• Containers center and horizontally pad your content. Usec-container for a responsive pixel width,c-container fluid forwidth: 100% across all viewports and devices, or a responsive container (e.g.,c-container breakpoint="md") fora combination of fluid and pixel widths.
• Rows are wrappers for columns. Each column has horizontalpadding (called agutter) for controlling thespace between them. Thispadding is then counteracted on the rows with negative margins to ensure the content inyourcolumns is visually aligned down the left side. Rows also support modifier classes touniformly apply columnsizingandgutter classes to change the spacing of your content.
• Columns are incredibly flexible. There are 12 template columns available per row, allowing you to createdifferent combinations of elements that span any number of columns. Column classes indicate the number of templatecolumns to span (e.g.,c-col [xs]="4" spans four). Widths are set in percentages so you always have the samerelative sizing.
• Gutters are also responsive and customizable.Gutter classesare available across all breakpoints, with all thesame sizes as ourmargin and padding spacing. Change horizontal gutterswith.gx-* classes, vertical gutters with.gy-*, or all gutters with.g-* classes..g-0 is also available toremove gutters.

Be aware of the limitations andbugs around flexbox, like theinabilityto use some HTML elements as flex containers.

Grid options

CoreUI grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six defaultgrid tiers are as follow:

• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how thegrid changes across these breakpoints:

Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class likec-col sm="6".

Equal-width

For example, here are two grid layouts that apply to every device and viewport, fromxs toxxl. Add any number ofunit-less classes for each breakpoint you need and every column will be the same width.

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columnsautomatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.Note that the other columns will resize no matter the width of the center column.

Variable width content

Usec-col xs|sm|md|lg|xl="auto" props to size columns based on the natural width of their content.

Responsive classes

CoreUI's grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size ofyour columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use thec-col andc-col xs= classes.Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick toc-col.

Stacked to horizontal

Using a single set ofc-col sm= classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

Mix and match

Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier asneeded. See the example below for a better idea of how it all works.

Row columns

Use the responsivec-row [sm | md | lg | xl | xxl]=* classes to quickly set the number of columns that best render yourcontent and layout. Whereas normalc-col xs= classes apply to the individual columns (e.g.,c-col xs="4"), the rowcolumns classes are set on the parentc-row as a shortcut. With c-rowc-row [sm | md | lg | xl | xxl]="'auto'" you cangive the columns their natural width.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

Nesting

To nest your content with the default grid, add a newrow and set of.col-sm-* columns within an existing.col-sm-* column.Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

API reference

Grid Module

c-container

component

Inputs

c-row cRow

componentdirective

Inputs

gutter

directive for c-row

Inputs

c-col cCol

componentdirective

Inputs