Bootstrap - Columns

Ethan D. -

Creating Basic Columns

To start using Bootstrap columns, you first need to set up a container. The container is a fundamental element in Bootstrap that holds the rows and columns of your layout. You can create a container by adding the .container class to a <div> element.

Inside the container, you define rows and columns. A row is created by adding the .row class to a <div> element. Rows are used to group columns horizontally. Columns are then placed inside the row and are created using the col-* classes.

Bootstrap provides a simple way to create equal-width columns. By default, if you don't specify the width of columns, they will automatically be evenly distributed within the row. For example, if you have four columns inside a row without specifying their widths, each column will take up 25% of the row's width.

Example: Equal-width Columns

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
    <div class="col">Column 4</div>
  </div>
</div>

In addition to equal-width columns, you can also define column widths based on percentages. Bootstrap's grid system is based on a 12-column layout. You can specify the width of a column using the col-* classes, where * represents a number from 1 to 12. For example, col-6 would create a column that spans half the width of the row, col-4 would create a column that spans one-third of the row, and so on.

Example: Percentage-based Columns

<div class="container">
  <div class="row">
    <div class="col-6">Column 1 (50% width)</div>
    <div class="col-3">Column 2 (25% width)</div>
    <div class="col-3">Column 3 (25% width)</div>
  </div>
</div>

By using the col-* classes, you have full control over the width of each column within a row. This allows you to create flexible and custom layouts according to your design requirements.

Responsive Column Classes

Bootstrap has responsive column classes that let you change the size and behavior of columns based on the screen size. These classes help you make responsive layouts that adapt to different devices and viewport widths.

The responsive column classes in Bootstrap use a naming convention of col-{breakpoint}-{width}, where {breakpoint} is the screen size and {width} is the column width. The available breakpoints are:

Breakpoint Applies to screens with a width of
sm (small) 576px or larger
md (medium) 768px or larger
lg (large) 992px or larger
xl (extra-large) 1200px or larger

To use responsive column classes, you add the breakpoint and width to the col- prefix. For example, col-md-6 makes a column that spans half the width of the row on medium-sized screens and above.

Example: Using Responsive Column Classes for Different Screen Sizes

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-sm-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-sm-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>
  • On small screens (576px and above), each column takes up the full width of the row (col-sm-12).
  • On medium-sized screens (768px and above), the first two columns each span half the width of the row (col-md-6), while the third column takes up the full width (col-md-12).
  • On large screens (992px and above), each column spans one-third of the row (col-lg-4).

By combining different responsive column classes, you can make layouts that adapt to various screen sizes. This allows your website or application to provide a good viewing experience across devices, from smartphones to desktops.

Responsive Column Layout Example

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <h3>Sidebar</h3>
      <p>Content for the sidebar goes here.</p>
    </div>
    <div class="col-sm-12 col-md-8">
      <h3>Main Content</h3>
      <p>Main content of the page goes here.</p>
    </div>
  </div>
</div>
  • On small screens, the sidebar and main content stack vertically, each taking up the full width of the row.
  • On medium-sized screens and above, the sidebar takes up one-third of the row's width (col-md-4), while the main content takes up the remaining two-thirds (col-md-8).

By using Bootstrap's responsive column classes, you can easily make flexible and adaptive layouts that respond to different screen sizes, providing a better user experience across various devices.

Column Offsets and Ordering

Bootstrap provides classes that let you offset columns and change their order within a row. Offsetting columns means adding empty space to the left of a column, while changing the order lets you rearrange the columns visually without changing the HTML structure.

To offset a column, you can use the offset-* classes, where * represents the number of columns to offset. For example, offset-md-2 would add an offset of two columns on medium-sized screens and above. The offset classes follow the same responsive breakpoint convention as the column classes (offset-sm-*, offset-md-*, offset-lg-*, offset-xl-*).

Example: Offset Columns

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h3>Centered Content</h3>
      <p>This content is centered on medium-sized screens and above.</p>
    </div>
  </div>
</div>

In addition to offsetting columns, Bootstrap lets you change the order of columns using the order-* classes. The * represents the order value, which can be a number from 1 to 12. A higher order value means the column will appear later in the visual order.

Example: Change Column Order

<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-2">
      <h3>Column 1</h3>
      <p>This column appears second on medium-sized screens and above.</p>
    </div>
    <div class="col-md-4 order-md-3">
      <h3>Column 2</h3>
      <p>This column appears third on medium-sized screens and above.</p>
    </div>
    <div class="col-md-4 order-md-1">
      <h3>Column 3</h3>
      <p>This column appears first on medium-sized screens and above.</p>
    </div>
  </div>
</div>

By combining column offsets and ordering, you can create more complex and flexible layouts.

Example: Column Offsets and Ordering Combined

<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-2">
      <h3>Sidebar</h3>
      <p>This sidebar appears on the right on medium-sized screens and above.</p>
    </div>
    <div class="col-md-6 order-md-1">
      <h3>Main Content</h3>
      <p>The main content appears first on medium-sized screens and above.</p>
    </div>
    <div class="col-md-2 offset-md-4 order-md-3">
      <h3>Additional Info</h3>
      <p>This additional info is offset by four columns and appears last.</p>
    </div>
  </div>
</div>
Example Explanation
Offset Columns The offset-md-3 class adds an offset of three columns on the left side of the column on medium-sized screens and above, centering the content.
Change Column Order The order-md-* classes are used to change the visual order of the columns on medium-sized screens and above. The column with order-md-1 appears first, followed by order-md-2 and order-md-3.
Column Offsets and Ordering Combined The main content has order-md-1, so it appears first on medium-sized screens and above. The sidebar has order-md-2, so it appears second. The additional info has offset-md-4 and order-md-3, so it is offset by four columns and appears last.

By using column offsets and ordering, you can create more advanced and custom layouts that adapt to different screen sizes and design requirements. These features give you greater control over the placement and arrangement of columns within a row.

Nesting Columns

Bootstrap lets you nest columns within a column, creating more complex and hierarchical layouts. Nesting columns means placing a new row inside an existing column and defining columns within that new row. This feature is useful when you need to divide a column into smaller sections or create more complex grid structures.

To create nested columns, you add a new .row class within an existing column and define the columns inside that new row using the col-* classes. The nested columns will have the same total width as the parent column.

Example: Basic Nested Columns

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h3>Parent Column</h3>
      <div class="row">
        <div class="col-md-6">
          <p>Nested Column 1</p>
        </div>
        <div class="col-md-6">
          <p>Nested Column 2</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <h3>Sibling Column</h3>
      <p>This column is a sibling to the parent column.</p>
    </div>
  </div>
</div>
Element Description
Parent column Has a width of col-md-8 (2/3 of the row) on medium-sized screens and above.
Nested columns Inside the parent column, a new row is created with two nested columns, each having a width of col-md-6 (half of the parent column).
Sibling column Has a width of col-md-4 (1/3 of the row) and is not affected by the nested columns.

Nesting columns lets you create more advanced grid layouts and divide columns into smaller sections. You can nest columns multiple levels deep, creating complex hierarchical structures as needed.

Example: Multiple Levels of Nested Columns

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <h3>Level 1 Column</h3>
      <div class="row">
        <div class="col-lg-6">
          <h4>Level 2 Column A</h4>
          <div class="row">
            <div class="col-lg-4">
              <p>Level 3 Column I</p>
            </div>
            <div class="col-lg-8">
              <p>Level 3 Column II</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <h4>Level 2 Column B</h4>
          <p>Content for Level 2 Column B goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <h3>Sibling Column</h3>
      <p>This column is a sibling to the Level 1 column.</p>
    </div>
  </div>
</div>
Element Description
Level 1 column Has a width of col-lg-8 on large screens and above.
Level 2 columns Inside the Level 1 column, there are two Level 2 columns (Level 2 Column A and Level 2 Column B), each with a width of col-lg-6.
Level 3 columns Within Level 2 Column A, there is another row with two Level 3 columns (Level 3 Column I and Level 3 Column II), with widths of col-lg-4 and col-lg-8, respectively.
Sibling column Has a width of col-lg-4 and is not affected by the nested columns.

By nesting columns, you can create more complex and structured layouts that organize your content hierarchically. This technique is useful when building layouts with sidebar sections, card grids, or any design that needs dividing columns into smaller subsections.

Column Alignment

Bootstrap provides classes to align columns vertically and horizontally within a row. This allows you to control the positioning of content inside columns and create layouts.

To align columns vertically, you can use the align-items-* classes on the row. These classes control the vertical alignment of the columns within the row. The available options are:

Class Description
align-items-start Aligns columns to the top of the row.
align-items-center Aligns columns to the middle of the row.
align-items-end Aligns columns to the bottom of the row.

Example: Align Columns Vertically

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      <h4>Column 1</h4>
      <p>This column is aligned to the top of the row.</p>
    </div>
    <div class="col">
      <h4>Column 2</h4>
      <p>This column is also aligned to the top of the row.</p>
      <p>It has more content.</p>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      <h4>Column 1</h4>
      <p>This column is aligned to the middle of the row.</p>
    </div>
    <div class="col">
      <h4>Column 2</h4>
      <p>This column is also aligned to the middle of the row.</p>
      <p>It has more content.</p>
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      <h4>Column 1</h4>
      <p>This column is aligned to the bottom of the row.</p>
    </div>
    <div class="col">
      <h4>Column 2</h4>
      <p>This column is also aligned to the bottom of the row.</p>
      <p>It has more content.</p>
    </div>
  </div>
</div>

Bootstrap also provides classes for horizontal alignment of columns within a row. You can use the justify-content-* classes on the row to control the horizontal alignment. The available options are:

Class Description
justify-content-start Aligns columns to the left side of the row.
justify-content-center Aligns columns to the center of the row.
justify-content-end Aligns columns to the right side of the row.

Example: Align Columns Horizontally

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      <h4>Column 1</h4>
      <p>This column is aligned to the left side of the row.</p>
    </div>
    <div class="col-4">
      <h4>Column 2</h4>
      <p>This column is also aligned to the left side of the row.</p>
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      <h4>Column 1</h4>
      <p>This column is aligned to the center of the row.</p>
    </div>
    <div class="col-4">
      <h4>Column 2</h4>
      <p>This column is also aligned to the center of the row.</p>
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      <h4>Column 1</h4>
      <p>This column is aligned to the right side of the row.</p>
    </div>
    <div class="col-4">
      <h4>Column 2</h4>
      <p>This column is also aligned to the right side of the row.</p>
    </div>
  </div>
</div>

You can combine vertical and horizontal alignment classes to position columns within a row.

Example: Combine Vertical and Horizontal Alignment

<div class="container">
  <div class="row align-items-center justify-content-center" style="height: 200px;">
    <div class="col-4">
      <h4>Centered Content</h4>
      <p>This column is aligned both vertically and horizontally in the center of the row.</p>
    </div>
  </div>
</div>
  • The align-items-center class aligns the column vertically to the middle of the row.
  • The justify-content-center class aligns the column horizontally to the center of the row.
  • The style="height: 200px;" attribute is added to the row to give it a height, making the vertical centering more apparent.

By using column alignment classes, you can control the positioning of columns within a row, both vertically and horizontally. This allows you to create balanced and centered layouts, or align columns to the top, bottom, left, or right of the row, depending on your design requirements.

Column Wrapping and No Gutters

Bootstrap's column system wraps columns to a new line when the total width of the columns is more than the width of the row. This feature makes the grid system responsive and stops columns from overflowing the row.

By default, when columns wrap to a new line, they keep their set widths. For example, if you have two columns with col-md-6 classes within a row, and the screen size is smaller than the medium breakpoint, the columns will stack vertically, each taking up the full width of the row.

Example: Column Wrapping

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h4>Column 1</h4>
      <p>This column will take up half the width on medium screens and above, and full width on smaller screens.</p>
    </div>
    <div class="col-md-6">
      <h4>Column 2</h4>
      <p>This column will take up half the width on medium screens and above, and full width on smaller screens.</p>
    </div>
    <div class="col-md-6">
      <h4>Column 3</h4>
      <p>This column will wrap to a new line on smaller screens.</p>
    </div>
  </div>
</div>
Screen Size Column Behavior
Medium screens and above The three columns will appear side by side, each taking up half the width of the row.
Smaller screens The columns will stack vertically, each taking up the full width of the row, with Column 3 wrapping to a new line.

Bootstrap also provides a class called no-gutters that removes the spacing between columns. By default, Bootstrap adds padding to the left and right of each column to create gutters. However, in some cases, you may want to remove these gutters for a seamless layout.

To remove gutters between columns, you can add the no-gutters class to the row containing the columns. This class removes the padding from the columns, letting them touch each other without any spacing.

Example: No Gutters

<div class="container">
  <div class="row no-gutters">
    <div class="col-md-6">
      <div style="background-color: #f0f0f0; padding: 10px;">
        <h4>Column 1</h4>
        <p>This column has no gutters.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div style="background-color: #e0e0e0; padding: 10px;">
        <h4>Column 2</h4>
        <p>This column also has no gutters.</p>
      </div>
    </div>
  </div>
</div>
Class Effect
no-gutters Added to the row, removing the padding between the columns.
Column styles The columns have different background colors and padding to visually distinguish them.
Column layout The columns touch each other without any spacing between them.

Keep in mind that when using no-gutters, you may need to add your own padding or margins to the content within the columns to create spacing as needed.

Example: Combining Column Wrapping and No Gutters

<div class="container">
  <div class="row no-gutters">
    <div class="col-md-4">
      <div style="background-color: #f0f0f0; padding: 10px;">
        <h4>Column 1</h4>
        <p>This column has no gutters and will wrap on smaller screens.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div style="background-color: #e0e0e0; padding: 10px;">
        <h4>Column 2</h4>
        <p>This column also has no gutters and will wrap on smaller screens.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div style="background-color: #d0d0d0; padding: 10px;">
        <h4>Column 3</h4>
        <p>This column has no gutters and will wrap on smaller screens.</p>
      </div>
    </div>
  </div>
</div>
Screen Size Column Behavior
Medium screens and above The columns will appear side by side without any spacing between them.
Smaller screens The columns will stack vertically, each taking up the full width of the row, with no gutters.

Practical Examples and Use Cases

Bootstrap columns are a key feature of the framework's grid system. They let you make flexible and responsive layouts for various web design projects. Let's look at some practical examples and use cases where Bootstrap columns can be applied.

Building a Responsive Grid Layout

One common use case for Bootstrap columns is building a responsive grid layout. A grid layout is a way to organize content into rows and columns, making it easy to structure and align elements on a webpage. With Bootstrap, you can quickly create a grid layout that adapts to different screen sizes.

Example: Building a Responsive Grid Layout

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="card">
        <img src="image3.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

In this example:

Element Description
container Wraps the grid layout and provides proper spacing.
row Groups the columns horizontally.
col-sm-12, col-md-6, col-lg-4 Define responsive column classes. On small screens, each column takes up the full width. On medium screens, two columns appear per row. On large screens, three columns appear per row.
card Contains an image, title, and text.

This responsive grid layout automatically adjusts based on the screen size, providing an optimal viewing experience across devices.

Creating a Responsive Navigation Menu

Another practical use case for Bootstrap columns is creating a responsive navigation menu. With the help of columns and the Bootstrap navbar component, you can design a navigation menu that collapses on smaller screens and expands on larger screens.

Example: Creating a Responsive Navigation Menu

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="row">
        <div class="col-lg-4">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-4">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Portfolio</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-4">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

In this example:

Element Description
navbar, navbar-expand-lg Create a responsive navigation bar that collapses on smaller screens and expands on larger screens.
container Wraps the content and provides proper spacing.
navbar-brand Represents the logo.
navbar-toggler Adds a toggle button for mobile navigation.
collapse, navbar-collapse Control the collapsible behavior of the navigation menu.
row Groups the navigation items horizontally.
col-lg-4 Divides the navigation items into three columns, allowing them to stack vertically on smaller screens and appear in three columns on larger screens.

This responsive navigation menu provides a user-friendly and mobile-friendly navigation experience, adapting to different screen sizes seamlessly.

Designing a Responsive Card Grid

Bootstrap columns can also be used to design a responsive card grid. A card grid is a layout where content is presented in a grid of cards, each containing an image, title, and description. By using columns, you can create a card grid that adjusts the number of cards per row based on the screen size.

Example: Designing a Responsive Card Grid

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
      <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
      <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <!-- Add more cards as needed -->
  </div>
</div>

In this example:

Element Description
container Wraps the card grid and provides proper spacing.
row Groups the cards horizontally.
col-sm-12, col-md-6, col-lg-4, col-xl-3 Define responsive column classes. On small screens, each card takes up the full width. On medium screens, two cards appear per row. On large screens, three cards appear per row. On extra-large screens, four cards appear per row.
card Contains an image, title, and text.

This responsive card grid allows the cards to adapt to different screen sizes, providing a visually appealing and user-friendly layout for showcasing content.