or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

grid-system.mdindex.mdjavascript-components.mdsass-customization.mdui-components.mdutilities.md
tile.json

grid-system.mddocs/

Grid System

Bootstrap's grid system is built with flexbox and provides a responsive, mobile-first approach to laying out content. It consists of containers, rows, and columns that work together to create flexible layouts across different screen sizes.

Capabilities

Container Classes

Container classes provide responsive fixed-width containers or full-width containers that center and horizontally pad content.

/**
 * Fixed-width responsive container
 * Max-widths: sm(540px), md(720px), lg(960px), xl(1140px), xxl(1320px)
 */
.container

/**
 * Full-width container spanning the entire viewport width
 */
.container-fluid

/**
 * Breakpoint-specific containers - 100% width until specified breakpoint
 */
.container-sm    /* 100% width until sm breakpoint, then max-width container */
.container-md    /* 100% width until md breakpoint, then max-width container */
.container-lg    /* 100% width until lg breakpoint, then max-width container */
.container-xl    /* 100% width until xl breakpoint, then max-width container */
.container-xxl   /* 100% width until xxl breakpoint, then max-width container */

Usage Examples:

<!-- Fixed-width responsive container -->
<div class="container">
  <div class="row">
    <div class="col">Content</div>
  </div>
</div>

<!-- Full-width container -->
<div class="container-fluid">
  <div class="row">
    <div class="col">Full width content</div>
  </div>
</div>

<!-- Breakpoint-specific container -->
<div class="container-md">
  <div class="row">
    <div class="col">Fluid until md breakpoint</div>
  </div>
</div>

Row Classes

Row classes create horizontal groups of columns with proper gutters and alignment.

/**
 * Flex container for columns with negative margins to offset column gutters
 */
.row

/**
 * Row alignment utilities
 */
.row.justify-content-start      /* Align columns to start */
.row.justify-content-center     /* Center columns horizontally */
.row.justify-content-end        /* Align columns to end */
.row.justify-content-around     /* Distribute columns with space around */
.row.justify-content-between    /* Distribute columns with space between */
.row.justify-content-evenly     /* Distribute columns with equal space */

/**
 * Vertical alignment utilities
 */
.row.align-items-start          /* Align columns to top */
.row.align-items-center         /* Center columns vertically */
.row.align-items-end            /* Align columns to bottom */

Column Classes

Column classes provide flexible sizing and responsive behavior within rows.

/**
 * Auto-sizing column that takes equal space
 */
.col

/**
 * Auto-sizing column that fits content width
 */
.col-auto

/**
 * Fixed-width columns (1-12 column spans)
 */
.col-1    /* 1/12 width */
.col-2    /* 2/12 width */
.col-3    /* 3/12 width */
.col-4    /* 4/12 width */
.col-5    /* 5/12 width */
.col-6    /* 6/12 width (50%) */
.col-7    /* 7/12 width */
.col-8    /* 8/12 width */
.col-9    /* 9/12 width */
.col-10   /* 10/12 width */
.col-11   /* 11/12 width */
.col-12   /* 12/12 width (100%) */

/**
 * Responsive column classes (apply at specific breakpoints and up)
 * Format: .col-{breakpoint}-{size}
 */
/* Small devices (landscape phones, 576px and up) */
.col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4,
.col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10,
.col-sm-11, .col-sm-12

/* Medium devices (tablets, 768px and up) */
.col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4,
.col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10,
.col-md-11, .col-md-12

/* Large devices (desktops, 992px and up) */
.col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10,
.col-lg-11, .col-lg-12

/* Extra large devices (large desktops, 1200px and up) */
.col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4,
.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10,
.col-xl-11, .col-xl-12

/* Extra extra large devices (larger desktops, 1400px and up) */
.col-xxl, .col-xxl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4,
.col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10,
.col-xxl-11, .col-xxl-12

Usage Examples:

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

<!-- Fixed-width columns -->
<div class="container">
  <div class="row">
    <div class="col-4">4/12 width</div>
    <div class="col-8">8/12 width</div>
  </div>
</div>

<!-- Responsive columns -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on mobile, half width on tablets, third width on desktops -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      Content 2
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      Content 3
    </div>
  </div>
</div>

Offset Classes

Offset classes move columns to the right without adding additional columns.

/**
 * Column offset classes for moving columns right
 * Format: .offset-{breakpoint}-{size}
 */
.offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6,
.offset-7, .offset-8, .offset-9, .offset-10, .offset-11

/* Responsive offsets */
.offset-sm-1, .offset-sm-2, .offset-sm-3, .offset-sm-4, .offset-sm-5,
.offset-sm-6, .offset-sm-7, .offset-sm-8, .offset-sm-9, .offset-sm-10, .offset-sm-11

.offset-md-1, .offset-md-2, .offset-md-3, .offset-md-4, .offset-md-5,
.offset-md-6, .offset-md-7, .offset-md-8, .offset-md-9, .offset-md-10, .offset-md-11

.offset-lg-1, .offset-lg-2, .offset-lg-3, .offset-lg-4, .offset-lg-5,
.offset-lg-6, .offset-lg-7, .offset-lg-8, .offset-lg-9, .offset-lg-10, .offset-lg-11

.offset-xl-1, .offset-xl-2, .offset-xl-3, .offset-xl-4, .offset-xl-5,
.offset-xl-6, .offset-xl-7, .offset-xl-8, .offset-xl-9, .offset-xl-10, .offset-xl-11

.offset-xxl-1, .offset-xxl-2, .offset-xxl-3, .offset-xxl-4, .offset-xxl-5,
.offset-xxl-6, .offset-xxl-7, .offset-xxl-8, .offset-xxl-9, .offset-xxl-10, .offset-xxl-11

Usage Examples:

<!-- Center column with offset -->
<div class="container">
  <div class="row">
    <div class="col-6 offset-3">Centered 6-column content</div>
  </div>
</div>

<!-- Responsive offset -->
<div class="container">
  <div class="row">
    <div class="col-4 offset-4 col-md-6 offset-md-3">
      <!-- Different offset at different breakpoints -->
    </div>
  </div>
</div>

Gutter Classes

Gutter classes control spacing between columns with gap utilities.

/**
 * Gap utilities for controlling gutters between columns and rows
 * Sizes: 0, 1(0.25rem), 2(0.5rem), 3(1rem), 4(1.5rem), 5(3rem)
 */
.g-0, .g-1, .g-2, .g-3, .g-4, .g-5       /* Both horizontal and vertical gaps */
.gx-0, .gx-1, .gx-2, .gx-3, .gx-4, .gx-5  /* Horizontal gaps only */
.gy-0, .gy-1, .gy-2, .gy-3, .gy-4, .gy-5  /* Vertical gaps only */

/* Responsive gap utilities */
.g-sm-0, .g-sm-1, .g-sm-2, .g-sm-3, .g-sm-4, .g-sm-5
.gx-sm-0, .gx-sm-1, .gx-sm-2, .gx-sm-3, .gx-sm-4, .gx-sm-5
.gy-sm-0, .gy-sm-1, .gy-sm-2, .gy-sm-3, .gy-sm-4, .gy-sm-5

.g-md-0, .g-md-1, .g-md-2, .g-md-3, .g-md-4, .g-md-5
.gx-md-0, .gx-md-1, .gx-md-2, .gx-md-3, .gx-md-4, .gx-md-5
.gy-md-0, .gy-md-1, .gy-md-2, .gy-md-3, .gy-md-4, .gy-md-5

.g-lg-0, .g-lg-1, .g-lg-2, .g-lg-3, .g-lg-4, .g-lg-5
.gx-lg-0, .gx-lg-1, .gx-lg-2, .gx-lg-3, .gx-lg-4, .gx-lg-5
.gy-lg-0, .gy-lg-1, .gy-lg-2, .gy-lg-3, .gy-lg-4, .gy-lg-5

.g-xl-0, .g-xl-1, .g-xl-2, .g-xl-3, .g-xl-4, .g-xl-5
.gx-xl-0, .gx-xl-1, .gx-xl-2, .gx-xl-3, .gx-xl-4, .gx-xl-5
.gy-xl-0, .gy-xl-1, .gy-xl-2, .gy-xl-3, .gy-xl-4, .gy-xl-5

.g-xxl-0, .g-xxl-1, .g-xxl-2, .g-xxl-3, .g-xxl-4, .g-xxl-5
.gx-xxl-0, .gx-xxl-1, .gx-xxl-2, .gx-xxl-3, .gx-xxl-4, .gx-xxl-5
.gy-xxl-0, .gy-xxl-1, .gy-xxl-2, .gy-xxl-3, .gy-xxl-4, .gy-xxl-5

Usage Examples:

<!-- No gutters -->
<div class="container">
  <div class="row g-0">
    <div class="col">No gap</div>
    <div class="col">No gap</div>
  </div>
</div>

<!-- Custom horizontal gutters -->
<div class="container">
  <div class="row gx-5">
    <div class="col">Large horizontal gap</div>
    <div class="col">Large horizontal gap</div>
  </div>
</div>

<!-- Responsive gutters -->
<div class="container">
  <div class="row g-2 g-md-4">
    <div class="col">Small gap on mobile, larger on tablets+</div>
    <div class="col">Column 2</div>
  </div>
</div>

Column Reordering

Classes for changing the visual order of columns without changing the HTML order.

/**
 * CSS order utilities for reordering columns
 * Values: first(-1), 0, 1, 2, 3, 4, 5, last(6)
 */
.order-first, .order-0, .order-1, .order-2, .order-3, .order-4, .order-5, .order-last

/* Responsive ordering */
.order-sm-first, .order-sm-0, .order-sm-1, .order-sm-2, .order-sm-3, .order-sm-4, .order-sm-5, .order-sm-last
.order-md-first, .order-md-0, .order-md-1, .order-md-2, .order-md-3, .order-md-4, .order-md-5, .order-md-last
.order-lg-first, .order-lg-0, .order-lg-1, .order-lg-2, .order-lg-3, .order-lg-4, .order-lg-5, .order-lg-last
.order-xl-first, .order-xl-0, .order-xl-1, .order-xl-2, .order-xl-3, .order-xl-4, .order-xl-5, .order-xl-last
.order-xxl-first, .order-xxl-0, .order-xxl-1, .order-xxl-2, .order-xxl-3, .order-xxl-4, .order-xxl-5, .order-xxl-last

Usage Examples:

<!-- Reorder columns -->
<div class="container">
  <div class="row">
    <div class="col order-3">First in DOM, third visually</div>
    <div class="col order-1">Second in DOM, first visually</div>
    <div class="col order-2">Third in DOM, second visually</div>
  </div>
</div>

<!-- Responsive reordering -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 order-md-2">
      <!-- Full width on mobile, second on tablets+ -->
    </div>
    <div class="col-12 col-md-6 order-md-1">
      <!-- Full width on mobile, first on tablets+ -->
    </div>
  </div>
</div>

Nested Grids

Grids can be nested within other grid columns for complex layouts.

Usage Examples:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class="row">
        <div class="col-6">Nested column 1</div>
        <div class="col-6">Nested column 2</div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      Sidebar content
    </div>
  </div>
</div>

Breakpoint System

Bootstrap uses a mobile-first responsive approach with the following breakpoints:

/* Breakpoint definitions */
$grid-breakpoints: (
  xs: 0,        /* Extra small devices (portrait phones) */
  sm: 576px,    /* Small devices (landscape phones) */
  md: 768px,    /* Medium devices (tablets) */
  lg: 992px,    /* Large devices (desktops) */
  xl: 1200px,   /* Extra large devices (large desktops) */
  xxl: 1400px   /* Extra extra large devices */
) !default;

/* Container max widths */
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;

Common Layout Patterns

Two-column layout:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Main content</div>
    <div class="col-12 col-md-4">Sidebar</div>
  </div>
</div>

Three-column layout:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-3">Left sidebar</div>
    <div class="col-12 col-lg-6">Main content</div>
    <div class="col-12 col-lg-3">Right sidebar</div>
  </div>
</div>

Card grid:

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col">
      <div class="card">Card 1</div>
    </div>
    <div class="col">
      <div class="card">Card 2</div>
    </div>
    <div class="col">
      <div class="card">Card 3</div>
    </div>
  </div>
</div>