Bootstrap 4 Grid Extra Small (xs)

Welcome to The Coding College! In this guide, we’ll dive into the extra small grid system (xs) in Bootstrap 4. The xs breakpoint is the default grid class in Bootstrap, optimized for devices with screen sizes less than 576px. This is perfect for creating responsive designs that cater to mobile-first development.

What is the Extra Small Grid (xs)?

Bootstrap’s grid system starts with the extra small (xs) breakpoint. It is the default grid behavior for devices smaller than 576px. You don’t need to explicitly use .col-xs-* because the xs size is automatically applied when you use .col-*.

Key Features:

  1. Designed for mobile-first layouts.
  2. Automatically stacks content vertically on small screens.
  3. Scales up for larger devices using breakpoints like sm, md, lg, and xl.

Basic Syntax

Here’s how you define columns in the extra small grid system:

<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>
</div>

Explanation:

  • Extra small screens (<576px): Columns stack vertically.
  • Larger screens (≥576px): Columns behave according to additional classes (col-sm-*, col-md-*, etc.).

Example 1: Default Extra Small Columns

<div class="container">
  <div class="row">
    <div class="col">Full-width Column 1</div>
    <div class="col">Full-width Column 2</div>
  </div>
</div>

Behavior:

  • On extra small screens (<576px), both columns take up the full width and stack vertically.
  • On larger screens, the columns remain side by side, sharing equal space.

Example 2: Specifying Column Sizes for Extra Small

You can explicitly define column widths for extra small screens using .col-* classes:

<div class="container">
  <div class="row">
    <div class="col-4">Column 1 (4/12)</div>
    <div class="col-8">Column 2 (8/12)</div>
  </div>
</div>

Behavior:

  • On extra small screens, the first column takes 4/12 of the row, and the second column takes 8/12.
  • On larger screens, this layout remains the same unless other breakpoints are defined.

Example 3: Mixed Responsive Classes

Combine col-* with other breakpoints like col-sm-* to create responsive layouts:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6">Column 1</div>
    <div class="col-12 col-sm-6">Column 2</div>
  </div>
</div>

Behavior:

  • On extra small screens (<576px), both columns stack vertically and take the full width (col-12).
  • On small screens (≥576px), the columns align horizontally and take half the width each (col-sm-6).

Example 4: Nested Extra Small Grid

You can create more complex layouts by nesting rows inside columns:

<div class="container">
  <div class="row">
    <div class="col">
      Parent Column
      <div class="row">
        <div class="col">Nested Column 1</div>
        <div class="col">Nested Column 2</div>
      </div>
    </div>
  </div>
</div>

Behavior:

  • On extra small screens, the nested columns stack vertically inside the parent column.
  • On larger screens, the nested columns align horizontally, depending on additional breakpoints.

Example 5: Full-width Layout with container-fluid

Use container-fluid to create an extra small grid that spans the entire viewport width:

<div class="container-fluid">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

Customizing Extra Small Grid

You can customize spacing, alignment, and visibility for the extra small grid using Bootstrap’s utility classes:

1. Spacing Utilities

Use .m-* and .p-* classes to add margin and padding:

<div class="row">
  <div class="col p-3">Column with Padding</div>
  <div class="col m-3">Column with Margin</div>
</div>

2. Alignment Utilities

Align content using align-items-* and justify-content-* classes:

<div class="row align-items-center justify-content-center">
  <div class="col-6">Aligned Column</div>
</div>

Practical Use Case: Responsive Card Layout

Here’s a practical example of using the extra small grid system for a card layout:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Working with Extra Small Grid

  1. Use the Mobile-First Approach: Start with .col-* for the extra small breakpoint, then add other breakpoints as needed.
  2. Test on Real Devices: Ensure your layout looks good on actual mobile screens, not just in browser simulators.
  3. Spacing is Key: Use Bootstrap’s spacing utilities (.p-*, .m-*) to fine-tune the layout.
  4. Combine with Flexbox Utilities: Use classes like d-flex and flex-column to enhance grid flexibility.

Conclusion

The extra small grid system in Bootstrap 4 is the foundation of responsive design. By mastering its default behavior and leveraging breakpoints, you can create layouts that adapt beautifully to any screen size.

Leave a Comment