• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid XSmall

← Previous Next →

What is Bootstrap 4 Grid XSmall?

The Bootstrap 4 Grid XSmall system refers to the grid layout for extra-small devices, typically screens less than 576px wide, such as smartphones. It ensures that content remains readable and well-structured on small devices by stacking columns vertically by default.

Bootstrap 4’s grid is mobile-first, meaning the default layout applies to extra-small devices unless overridden by larger breakpoints. Understanding XSmall grids is essential to create responsive designs that adapt seamlessly to mobile users.

Extra-Small Device Classes

For extra-small devices, you can use the .col- class. Columns defined with this class automatically stack vertically unless a larger breakpoint is specified.

Example:

<div class="container">
  <div class="row">
    <div class="col bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • All three columns stack on extra-small screens.

  • .col divides the row equally if the screen is large enough, but on XSmall devices, each column spans the full width.

  • Padding .p-3 and margin .mb-2 maintain proper spacing.

Combining XSmall with Other Breakpoints

Bootstrap 4 allows you to combine XSmall classes with other breakpoints like .col-sm-, .col-md-, etc., to create layouts that adjust as the screen grows.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-md-6 bg-success text-white p-3 mb-2">Column 2</div>
  </div>
</div>

  • .col-12 ensures full width on extra-small devices.

  • .col-md-6 displays side by side on medium and larger screens.

  • This approach guarantees mobile-first responsiveness.

Nesting Columns for XSmall Screens

Columns can be nested even in XSmall layouts. Nested grids allow content within a column to have its own layout, without affecting the main grid.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 bg-primary p-3">
      Main Column
      <div class="row mt-2">
        <div class="col-6 bg-warning p-2">Nested 1</div>
        <div class="col-6 bg-danger p-2">Nested 2</div>
      </div>
    </div>
  </div>
</div>

  • The main column spans the full width on extra-small screens.

  • Nested columns divide the parent column into halves, maintaining responsiveness.

Offsets in XSmall Grids

Offsets can move columns to the right, creating spacing or centering content on XSmall devices.

Example:

<div class="container">
  <div class="row">
    <div class="col-6 offset-3 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • .offset-3 moves the column three units to the right.

  • The column width .col-6 spans half the row.

  • This technique centers the column on extra-small devices.

Stacked Layouts on XSmall Devices

By default, columns stack on XSmall screens. You can control stacking using responsive classes.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • Columns stack on XSmall devices using .col-12.

  • On small screens, columns appear side by side two per row.

  • On medium screens, they appear in three equal columns.

Flexbox Alignment for XSmall Columns

Bootstrap 4 uses Flexbox utilities to control alignment, even on extra-small devices:

  • .justify-content-center → Horizontal centering

  • .align-items-center → Vertical centering

Example:

<div class="container" style="height:150px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-8 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • The column is centered both horizontally and vertically on extra-small devices.

  • Flexbox utilities reduce the need for custom CSS.

Best Practices for XSmall Grids

  1. Always define full-width columns with .col-12 for extra-small screens.

  2. Combine XSmall with larger breakpoints to create responsive designs.

  3. Use nested grids for complex layouts within a column.

  4. Apply offsets to center content or create gaps.

  5. Test your layout on real mobile devices to ensure readability.

  6. Keep padding and margin utilities consistent for clean spacing.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid XSmall layout, focusing on how columns behave on extra-small devices. You learned about full-width columns using .col-12, combining XSmall with larger breakpoints for responsive layouts, nesting columns, using offsets, and aligning columns with Flexbox utilities. Mastering XSmall grids ensures your website is mobile-first, readable, and visually consistent on small devices, which is essential for modern responsive web design.

Practice Questions

  1. Create a row with three columns stacked vertically using .col-12 for extra-small devices.

  2. Make a two-column layout that stacks on XSmall devices but displays side by side on medium screens using .col-12 col-md-6.

  3. Nest two smaller columns inside a larger column for XSmall devices using .col-12 for the parent and .col-6 for nested columns.

  4. Center a column using .col-6 offset-3 on extra-small screens.

  5. Create a row with four columns stacked on XSmall devices using .col-12.

  6. Combine XSmall and small breakpoints to display columns stacked on mobile but two per row on small devices using .col-12 col-sm-6.

  7. Use Flexbox utilities .justify-content-center and .align-items-center to center a column horizontally and vertically.

  8. Apply background colors to XSmall columns to visually check stacking.

  9. Create a row with three columns stacked on XSmall devices and side by side on medium screens using .col-12 col-md-4.

  10. Add padding .p-3 and margin .mb-2 to each column to maintain consistent spacing on XSmall devices.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top