Columns

Columns are the building blocks of Bootstrap layouts. They sit inside rows and determine how wide each section is.

Column Sizes

<!-- Equal columns -->
<div class="row">
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
    <div class="col-md-3">25%</div>
</div>

<!-- Unequal columns -->
<div class="row">
    <div class="col-md-8">Main (66%)</div>
    <div class="col-md-4">Sidebar (33%)</div>
</div>

Responsive Columns

Combine multiple classes for different breakpoints:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        Responsive column
    </div>
</div>

This column is:

• Full width on phones (xs: 12 columns)
• Half width on tablets (sm: 6 columns)
• One-third on desktops (md: 4 columns)
• One-quarter on large screens (lg: 3 columns)

Nesting Columns

<div class="row">
    <div class="col-md-8">
        Main content
        <div class="row">
            <div class="col-md-6">Nested left</div>
            <div class="col-md-6">Nested right</div>
        </div>
    </div>
    <div class="col-md-4">Sidebar</div>
</div>

Column Padding

Each column has 15px padding on each side (called the gutter). This creates 30px spacing between columns.