The Bootstrap grid columns are also nestable, that means you can put rows and columns inside an existing column. However, the formula for placing the columns will be the same, i.e. the sum of column numbers should be equal to 12 or less within a single row.

Example

<div class="container">
    <div class="row">
        <div class="col-sm-8">Column left</div>
        <div class="col-sm-4">
            <!--Column right with nested rows and columns-->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>

Creating Variable Width Columns

You can use the col-{breakpoint}-auto classes to size columns based on the natural width of their content. Try out the following example to see how it works:

Example

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Column left</div>
        <div class="col-md-auto">Variable width column</div>
        <div class="col-md-3">Column right</div>
    </div>
    <div class="row">
        <div class="col">Column left</div>
        <div class="col-auto">Variable width column</div>
        <div class="col">Column right</div>
    </div>
</div>

Alignment of Grid Columns

You can use the flexbox alignment utilities to vertically and horizontally align grid columns inside a container. Try out the following examples to understand how it works:

Vertical Alignment of Grid Columns

You can use the classes .align-items-start, .align-items-center, and .align-items-end to align the grid columns vertically at the top, middle and bottom of a container, respectively.

Example

<div class="container">
    <div class="row align-items-start">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

Individual columns inside a row can also be aligned vertically. Here’s an example:

Example

<div class="container">
    <div class="row">
        <div class="col align-self-start">Column one</div>
        <div class="col align-self-center">Column two</div>
        <div class="col align-self-end">Column three</div>
    </div>
</div>

Note: You can skip the number in .col-* grid class and just use the .col class to create equal size columns for all devices (extra small, small, medium, large, and extra large).