Layout

Columns

Note: Our system is based on the Bootstrap toolkit. The contents of this page are a simplified version of Bootstrap's extensive documentation.

Source: Read more about this topic on Bootstrap's website.


Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.


Heads up! Be sure to read the Grid page first before diving into how to modify and customize your grid columns.

How They Work
  • Columns build on the grid's flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.
  • When building grid layouts, all content goes in columns. The hierarchy of our system's grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
  • Our system includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.


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.


Example: Column Wrapping

Column One
(.col-12 .col-sm-9)

Column Two
(.col-12 .col-sm-4)

Column Three
(.col-12 .col-sm-6)

Copy 
                                    
                                        <div class="container">

                                        <div class="row">

                                        <div class="col-12 col-sm-9">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-6">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Offsetting Columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.


Example: Offset Classes

Move columns to the right using .offset-sm-* classes. These classes increase the left margin of a column by * columns. For example, .offset-sm-2 moves .col-sm-4 over two columns.

Column One
(.col-12 .col-sm-6)

Column Two
(.col-12 .col-sm-4 .offset-sm-2)

Copy 
                                    
                                        <div class="container">

                                        <div class="row">

                                        <div class="col-12 col-sm-6">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4 offset-sm-2">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Reordering Columns

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-lg-3). Includes support for 1 through 5 across all six grid tiers.


Example: Order Classes

Column One
(.col-12 .col-sm-4 .order-1 .order-lg-3)

Column Two
(.col-12 .col-sm-4 .order-2 .order-lg-2)

Column Three
(.col-12 .col-sm-4 .order-3 .order-lg-1)

Copy 
                                    
                                        <div class="container">

                                        <div class="row">

                                        <div class="col-12 col-sm-4 order-1 order-lg-3">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4 order-2 order-lg-2">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4 order-3 order-lg-1">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Vertical Alignment

Use flexbox alignment utilities to vertically align columns.


Example: Align Items Start

Column One

Column Two

Column Three

Copy 
                                    
                                        <div class="container">

                                        <div class="row align-items-start">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Align Items Center

Column One

Column Two

Column Three

Copy 
                                    
                                        <div class="container">

                                        <div class="row align-items-center">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Align Items End

Column One

Column Two

Column Three

Copy 
                                    
                                        <div class="container">

                                        <div class="row align-items-end">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Align Self

Column One

Column Two

Column Three

Copy 
                                    
                                        <div class="container">

                                        <div class="row">

                                        <div class="col-12 col-sm-4 align-self-start">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4 align-self-center">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4 align-self-end">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Horizontal Alignment

Use flexbox alignment utilities to horizontally align columns.


Example: Justify Content Start

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-start">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Justify Content Center

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-center">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Justify Content End

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-end">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Justify Content Around

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-around">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Justify Content Between

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-between">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>


Example: Justify Content Evenly

Column One

Column Two

Copy 
                                    
                                        <div class="container">

                                        <div class="row justify-content-evenly">

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        <div class="col-12 col-sm-4">

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>

© Interactive Brokers LLC