Columns options for alignment, ordering, and offsetting our flexbox grid system.
Here you can see how to use column classes to manage widths of non-grid elements.
How they work
Columns build on the grid’s flexbox architecture. You choose how columns grow, shrink, or otherwise change.
When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content.
Bootstrap includes predefined classes for creating fast, responsive layouts.
Bootstrap Vertical alignment Example 1
Use flexbox alignment utilities to vertically and horizontally align columns.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"><divclass="container text-center"><divclass="row align-items-start"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div><divclass="row align-items-center"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div><divclass="row align-items-end"><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div><divclass="col">
One of three columns
</div></div></div></body></html>
Output
Bootstrap Vertical alignment Example 2
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"><divclass="container text-center"><divclass="row"><divclass="col align-self-start">
One of three columns
</div><divclass="col align-self-center">
One of three columns
</div><divclass="col align-self-end">
One of three columns
</div></div></div></body></html>
Output
Bootstrap Horizontal Alignment
Change the Horizontal alignment with any of the responsive justify-content-* classes.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bd-example-row"><divclass="container text-center"><divclass="row justify-content-start"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-center"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-end"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-around"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-between"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div><divclass="row justify-content-evenly"><divclass="col-4">
One of two columns
</div><divclass="col-4">
One of two columns
</div></div></div></body></html>
Output
Bootstrap Column Wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bd-example-row"><divclass="container"><divclass="row"><divclass="col-9">.col-9</div><divclass="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div><divclass="col-6">.col-6<br>Subsequent columns continue along the new line.</div></div></div></body></html>
Output
Bootstrap Column Breaks
Breaking columns to a new line in flexbox require a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.
Use .order-classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers. If you need more .order-* classes, you can modify the default number via Sass variable.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bd-example-row"><divclass="container text-center"><divclass="row"><divclass="col">
First in DOM, no order applied
</div><divclass="col order-5">
Second in DOM, with a larger order
</div><divclass="col order-1">
Third in DOM, with an order of 1
</div></div></div></body></html>
Output
Bootstrap Offset Classes Example 1
Move Columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
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.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="col-3 bg-light p-3 border">
.col-3: width of 25%
</div><divclass="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div></body></html>
Output
Bootstrap Standalone Column Classes Example 2
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="clearfix"><svgclass="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3"width="100%"height="210"xmlns="http://www.w3.org/2000/svg"role="img"aria-label="Placeholder: Responsive floated image"preserveAspectRatio="xMidYMid slice"focusable="false"><title>Placeholder</title><rectwidth="100%"height="100%"fill="#868e96"></rect><textx="50%"y="50%"fill="#dee2e6"dy=".3em">Responsive floated image</text></svg><p>
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.
</p><p>
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.
</p></div></body></html>
Related Searches to Bootstrap Columns - Bootstrap Tutorial
how to add space between bootstrap columns make bootstrap columns same height how to remove space between bootstrap columns resizable bootstrap columns gap between bootstrap columns margin between bootstrap columns spacing between bootstrap columns padding between bootstrap columns vertical line between bootstrap columns bootstrap 5 columns bootstrap 4 columns bootstrap 3 columns bootstrap space between columns bootstrap two columns bootstrap gap between columns bootstrap equal height columns
