Margin utilities

With the move to flexbox in v4, you can use margin utilities like.me-autoto force sibling columns away from one another.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

Column wrapping

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

Column breaks

.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4

Order classes

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

There are also responsive .order-first and.order-last classes that change the order of an element by applying order: -1andorder: 6, respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

Standalone column classes

The .col-* classes can also be used outside a.row to give an element a specific width. Whenever column classes are used as non direct children of a row, the paddings are omitted.

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

Offsetting Columns

Offset classes

.col-md-4

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

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

In addition to column clearing at responsive breakpoints, you may need to reset offsets.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a .clearfixwrapper to clear the float if the text is shorter.

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

Switcher

Columns

Offsetting Columns