• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Grid XLarge

← Previous Next →

What is Bootstrap 4 Grid XLarge?

The Bootstrap 4 Grid XLarge system is designed for extra-large devices, typically screens 1200px and wider, such as large desktops and high-resolution monitors. XLarge grids allow developers to create spacious, well-aligned layouts, distributing content effectively across wide screens.

Bootstrap 4 follows a mobile-first approach, so XLarge grid classes override smaller breakpoints to provide optimal display on very wide screens without compromising responsiveness on tablets or smaller devices.

Extra-Large Device Classes

For extra-large devices, Bootstrap 4 provides the .col-xl- classes. Columns using these classes follow the 12-column system and adjust automatically based on the row width.

Example:

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

  • On extra-large devices, columns display horizontally side by side.

  • On smaller screens, columns stack or adjust according to smaller breakpoints.

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

Combining XLarge with Other Breakpoints

XLarge grids can be combined with smaller breakpoints for fully responsive layouts.

Example:

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

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

  • .col-sm-6 displays two columns per row on small devices.

  • .col-md-4 shows three columns per row on medium devices.

  • .col-lg-3 displays four columns per row on large devices.

  • .col-xl-2 distributes six columns per row on extra-large devices.

Nesting Columns in XLarge Grids

Nesting columns allows complex layouts on very wide screens.

Example:

<div class="container">
  <div class="row">
    <div class="col-xl-8 bg-primary text-white p-3">
      Main Column
      <div class="row mt-2">
        <div class="col-xl-6 bg-warning p-2">Nested 1</div>
        <div class="col-xl-6 bg-danger p-2">Nested 2</div>
      </div>
    </div>
    <div class="col-xl-4 bg-success text-white p-3">Sidebar</div>
  </div>
</div>

  • The main column spans two-thirds, sidebar one-third on extra-large devices.

  • Nested columns divide the main column into halves, maintaining layout integrity.

Offsets and Ordering in XLarge Grids

Offsets and ordering enhance layout control:

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

  • .offset-xl-3 moves the column three units to the right on extra-large screens.

Column ordering example:

<div class="row">
  <div class="col-xl-6 order-xl-2 bg-success p-3">Second Column</div>
  <div class="col-xl-6 order-xl-1 bg-primary p-3">First Column</div>
</div>

  • Columns reorder visually on XLarge devices without changing HTML structure.

Stacked and Horizontal Layouts on XLarge Devices

Columns can stack or display horizontally depending on the screen size and classes used:

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

  • Extra-small to large devices: columns stack or adjust based on their respective breakpoints.

  • Extra-large devices: columns display horizontally side by side.

This ensures consistent and responsive layouts across all screen sizes.

Flexbox Alignment in XLarge Grids

Bootstrap 4’s Flexbox utilities allow precise alignment:

  • .justify-content-center → horizontal centering

  • .align-items-center → vertical centering

Example:

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

  • Columns are centered horizontally and vertically on extra-large devices.

  • Flexbox eliminates the need for additional CSS.

Best Practices for XLarge Grids

  1. Use .col-xl- classes to optimize layouts for extra-large screens.

  2. Combine with .col-, .col-sm-, .col-md-, and .col-lg- for fully responsive design.

  3. Nest columns for complex layouts on wide screens.

  4. Apply offsets to center content or create spacing.

  5. Test layouts on large desktops and high-resolution monitors.

  6. Use consistent padding and margin utilities to maintain spacing.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Grid XLarge system, focusing on layouts for screens ≥1200px. You learned how to use .col-xl- classes, combine them with smaller breakpoints, nest columns, apply offsets and ordering, and use Flexbox utilities. Mastering XLarge grids ensures your website is desktop and ultra-wide screen friendly, responsive, and visually consistent, providing an optimal experience on very large screens.

Practice Questions

  1. Create a row with four equal columns using .col-xl-3 to display horizontally on extra-large devices.

  2. Make a two-column layout that stacks on large devices but displays side by side on extra-large screens using .col-lg-12 col-xl-6.

  3. Nest two smaller columns inside a larger column using .col-xl-8 for the parent and .col-xl-6 for nested columns.

  4. Center a column using .col-xl-6 offset-xl-3 on extra-large devices.

  5. Create a row with six columns stacked on medium devices but six per row on extra-large devices using .col-12 col-xl-2.

  6. Combine extra-large and large breakpoints to display six columns on extra-large devices and four on large devices.

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

  8. Apply different background colors to each column to visually verify alignment and spacing.

  9. Build a row where four columns stack on large devices but display horizontally on extra-large screens using .col-12 col-xl-3.

  10. Add padding .p-3 and margin .mb-2 to all columns to maintain consistent spacing on extra-large 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