“ Grid layouts to get you familiar with building within the flexible grid system. " FlexibleGrid works very similarly to the standard float grid, but includes a number of different features only possible with flex, like horizontal and vertical alignment, auto sizing, and easier source ordering.
flex-grid Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.
@media / no queries
On mobile devices (.column-), tablets and below, the columns will automatically stack.
.column-3
.column-3
.column-3
.column-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column-3">.column-3</div>
                    <div class="column-3">.column-3</div>
                    <div class="column-3">.column-3</div>
                </div>
            
        
@media (min-width: 0px)
.column xs-(12/11/10/9/8/7/6/5/4/3/2/1)
.xs-3
.xs-3
.xs-3
.xs-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column xs-3">.xs-3</div>
                    <div class="column xs-3">.xs-3</div>
                    <div class="column xs-3">.xs-3</div>
                </div>
            
        
@media (min-width: 768px)
.column sm-(12/11/10/9/8/7/6/5/4/3/2/1)
.sm-3
.sm-3
.sm-3
.sm-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column sm-3">.sm-3</div>
                    <div class="column sm-3">.sm-3</div>
                    <div class="column sm-3">.sm-3</div>
                </div>
            
        
@media (min-width: 1024px)
.column md-(12/11/10/9/8/7/6/5/4/3/2/1)
.md-3
.md-3
.md-3
.md-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column md-3">.md-3</div>
                    <div class="column md-3">.md-3</div>
                    <div class="column md-3">.md-3</div>
                </div>
            
        
@media (min-width: 1279px)
.column lg-(12/11/10/9/8/7/6/5/4/3/2/1)
.lg-3
.lg-3
.lg-3
.lg-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column lg-3">.lg-3</div>
                    <div class="column lg-3">.lg-3</div>
                    <div class="column lg-3">.lg-3</div>
                </div>
            
        
@media (min-width: 1366px)
.column xl-(12/11/10/9/8/7/6/5/4/3/2/1)
.xl-3
.xl-3
.xl-3
.xl-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column xl-3">.xl-3</div>
                    <div class="column xl-3">.xl-3</div>
                    <div class="column xl-3">.xl-3</div>
                </div>
            
        
Flex Container
Apply display utilities to create a flexgrid container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
flex
flex container
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
Inline-flex
inline flex container
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-inline-flex">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
Flex > Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value
row
items aligned in the horizontal direction
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex flex-d-row">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
row-reverse
items aligned in the horizontal reverse direction
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex flex-d-row-reverse">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
column
items aligned in the vertical direction
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex flex-d-column">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
column-reverse
items aligned in the vertical reverse direction
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex flex-d-column-reverse">
                <div class="column-4">flex-item-1</div>
                <div class="column-4">flex-item-2</div>
                <div class="column-4">flex-item-3</div>
            </div>
        
    
Flex > Wrap
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.
nowrap
nowrap example
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  flex-nowrap">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
wrap
wrap example
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  flex-wrap">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
wrap-reverse
wrap reverse example
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  flex-wrap-reverse">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
Flex > Justify-Content
Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.
Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column
flex-start
Aligned to the left
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-start">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
flex-end
Aligned to the right
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-end">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
center
Aligned to the middle
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-center">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
baseline
On mobile devices, tablets and below, the columns will automatically stack.
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-baseline">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
space-around
Aligned to the space around
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-around">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
space-between
Aligned to the edges
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  justify-content-between">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
Flex > Align-Items
Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row.
Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column
flex-start
These columns align to the top
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  align-items-start">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
flex-end
These columns align to the bottom
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  align-items-end">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
center
These columns align to the middle
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  align-items-center">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
baseline
These columns align to the baseline
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  align-items-baseline">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
stretch
These columns align to the stretch
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex  align-items-stretch">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
Flex > Align-Self
Vertical Alignment of child columns (individually) Similar alignment classes can also be applied to individual columns.
flex-start
These column align to the top
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3  align-self-start">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
flex-end
These column align to the bottom
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3  align-self-end">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
center
These column align to the middle
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3  align-self-center">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
baseline
These column align to the baseline
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3  align-self-bsaeline">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
stretch
These column align to the top stretch
flex item 1
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3  align-self-stretch">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
Flex > Align-Content
Use align-content utilities on flexgrid containers to align flex items together on the cross axis. This property has no affect on single rows of flex items.
flex-start
Aligned to the top
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  align-content-start">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
flex-end
Aligned to the bottom
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  align-content-end">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
center
Aligned to the center
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  align-content-center">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
space-between
Aligned to the edges
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  align-content-between">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
space-around
Aligned to the space around
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
        copy
        
            <div class="row  d-flex  align-content-around">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
                <div class="column-3">flex-item-4</div>
                <div class="column-3">flex-item-5</div>
                <div class="column-3">flex-item-6</div>
                <div class="column-3">flex-item-7</div>
            </div>
        
    
Flex > Margin Auto
Flexgrid can do some pretty awesome things when you mix flex alignments with auto margins.
margin-left-auto
These row align to the "margin-left"
flex item 1
flex item 2
flex item 3 (item right)
        copy
        
            <div class="row  d-flex">
                <div class="column-3">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3 flex-ml-auto">flex-item-3</div>
            </div>
        
    
margin-right-auto
These row align to the "margin-right"
flex item 1 (item left)
flex item 2
flex item 3
        copy
        
            <div class="row  d-flex">
                <div class="column-3  flex-mr-auto">flex-item-1</div>
                <div class="column-3">flex-item-2</div>
                <div class="column-3">flex-item-3</div>
            </div>
        
    
Flex > Order
Change the visual order of specific flex items with a handful of order utilities.
first, last, unordered
order (first, last, unordered & ("order-: 1,2,3,4,5,6,7,8,9,10,12")
flex item 1 (order-unordered)
flex item 2 (order-last)
flex item 3 (order-first)
        copy
        
            <div class="row  d-flex">
                <div class="column-3  flex-order-unordered"></div>
                <div class="column-3  flex-order-last"></div>
                <div class="column-3  flex-order-first"></div>
            </div>
        
    
copy