Bootstrap - CSS Grid

Ethan D. - June 1, 2024

Getting Started

To start using Bootstrap CSS Grid in your project, you need to include the Bootstrap CSS file. You can download the CSS file from the Bootstrap website or use a content delivery network (CDN) link. The easiest way is to include the following CDN link in the <head> section of your HTML file:

Example: Bootstrap CDN Link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

After including the Bootstrap CSS file, you can build your grid layout. The basic structure of a Bootstrap CSS Grid has a container, rows, and columns.

The container wraps your grid. It can be a fixed-width container or a full-width container. To create a container, use the .container class for a fixed-width container or .container-fluid for a full-width container.

Inside the container, you create rows using the .row class. Rows are horizontal parts of your grid and group columns together.

Columns are placed inside rows. Bootstrap CSS Grid uses a 12-column system, which means that you can divide your row into 12 equal-width columns. To create columns, use classes like .col-*, where * is the number of columns you want to span.

Example: Basic Bootstrap CSS Grid Structure

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Column content -->
    </div>
    <div class="col-8">
      <!-- Column content -->
    </div>
  </div>
</div>

In this example, we have a container with a single row. The row is divided into two columns: one spanning 4 columns (.col-4) and the other spanning 8 columns (.col-8). The total number of columns in a row should always add up to 12.

You can have multiple rows within a container, and each row can have its own column structure. This allows you to create complex and responsive layouts using Bootstrap CSS Grid.

Grid System Basics

Bootstrap CSS Grid uses a 12-column grid system. The grid is divided into 12 equal-width columns. This 12-column system lets you create flexible and responsive layouts by specifying how many columns each element should span at different screen sizes.

To create columns within a row, you use grid classes. These classes are named in the format .col-{breakpoint}-{columns}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {columns} is the number of columns the element should span (from 1 to 12).

For example, if you want an element to span 6 columns on medium-sized screens and larger, you would use the class .col-md-6. If you want an element to span the full width on small screens and 4 columns on large screens, you would use the classes .col-12 .col-lg-4.

Bootstrap CSS Grid has predefined breakpoints that correspond to different screen sizes:

Breakpoint	Screen Size
`xs`	Screens less than 576px wide
`sm`	Screens 576px and up
`md`	Screens 768px and up
`lg`	Screens 992px and up
`xl`	Screens 1200px and up

You can use these breakpoints to create responsive designs that adapt to different screen sizes. By specifying different column classes for each breakpoint, you can control how your layout changes as the screen size changes.

Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Column content -->
    </div>
    <div class="col-12 col-md-6 col-lg-8">
      <!-- Column content -->
    </div>
  </div>
</div>

In this example, the first column spans the full width (12 columns) on extra small and small screens, 6 columns on medium screens, and 4 columns on large screens and up. The second column spans the full width on extra small and small screens, 6 columns on medium screens, and 8 columns on large screens and up.

Bootstrap CSS Grid also supports nesting grids. You can create a new row inside a column and then add columns within that row. This lets you create more complex and nested layouts.

Nesting Grids Example

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-6">
          <!-- Nested column content -->
        </div>
        <div class="col-6">
          <!-- Nested column content -->
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <!-- Column content -->
    </div>
  </div>
</div>

Understanding the 12-column grid, using grid classes with breakpoints, and nesting grids are important concepts for building responsive and flexible layouts with Bootstrap CSS Grid.

Responsive Grid

Bootstrap CSS Grid lets you create responsive layouts that adapt to different screen sizes. With grid breakpoints, media queries, and responsive column classes, you can control how your grid behaves on various devices.

To create a responsive grid, you can use responsive column classes. These classes let you specify different column widths for each breakpoint. The format of the responsive column classes is .col-{breakpoint}-{columns}, where {breakpoint} is the screen size and {columns} is the number of columns the element should span at that breakpoint.

Example: Column spanning multiple breakpoints

<div class="col-12 col-md-6 col-lg-4">
  <!-- Column content -->
</div>

By using responsive column classes, you can create layouts that automatically adjust based on the screen size. This ensures that your content is properly displayed and easily readable on various devices.

Bootstrap CSS Grid also provides utility classes for hiding and showing columns based on screen size. These classes allow you to control the visibility of columns at different breakpoints.

The classes for hiding columns are:

Class	Description
`.d-none`	Hides the column on all screen sizes
`.d-{breakpoint}-none`	Hides the column on the specified breakpoint and up

The classes for showing columns are:

Class	Description
`.d-block`	Shows the column on all screen sizes
`.d-{breakpoint}-block`	Shows the column on the specified breakpoint and up

Example: Hide column on small screens and show on medium screens

<div class="col-md-6 d-none d-md-block">
  <!-- Column content -->
</div>

By using these classes, you can create responsive layouts that adapt to different screen sizes by selectively hiding or showing columns based on the breakpoint.

Bootstrap CSS Grid's responsive features, including grid breakpoints, responsive column classes, and hiding/showing columns, give you the flexibility to create layouts that look great and function well on a variety of devices, from small mobile screens to large desktop displays.

Grid Alignment

Bootstrap CSS Grid has classes for aligning columns vertically and horizontally in a row. You can control the vertical alignment of columns using the align-items-* classes on the row. These classes let you align the columns to the top, middle, or bottom of the row.

To align columns vertically, use these classes:

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="row align-items-center">
  <div class="col">
    <!-- Column content -->
  </div>
  <div class="col">
    <!-- Column content -->
  </div>
</div>

Bootstrap CSS Grid also has classes for horizontal alignment of columns in a row. You can use the justify-content-* classes on the row to control the horizontal alignment. These classes let you align the columns to the left, center, right, or evenly distribute the space between them.

To align columns horizontally, use these classes:

Class	Description
`.justify-content-start`	Aligns columns to the left of the row
`.justify-content-center`	Aligns columns to the center of the row
`.justify-content-end`	Aligns columns to the right of the row
`.justify-content-around`	Distributes space around the columns evenly
`.justify-content-between`	Distributes space between the columns evenly

Example: Align Columns Horizontally

<div class="row justify-content-end">
  <div class="col-4">
    <!-- Column content -->
  </div>
  <div class="col-4">
    <!-- Column content -->
  </div>
</div>

Bootstrap CSS Grid also has classes for offsetting columns. Offsetting lets you create empty space before a column. You can use the offset-* classes to specify the number of columns to offset.

To offset a column, use these classes:

Class	Description
`.offset-{columns}`	Offsets the column by the specified number of columns
`.offset-{breakpoint}-{columns}`	Offsets the column at the specified breakpoint

Example: Offset Columns

<div class="row">
  <div class="col-md-4">
    <!-- Column content -->
  </div>
  <div class="col-md-4 offset-md-4">
    <!-- Column content -->
  </div>
</div>

Grid alignment classes in Bootstrap CSS Grid let you control the vertical and horizontal positioning of columns in a row, and the ability to offset columns. By using these classes, you can create visually appealing and well-aligned layouts.

Grid Ordering

Bootstrap CSS Grid lets you change the order of columns within a row using order classes. This can help when you want to rearrange the visual order of your content without changing the HTML structure.

To reorder columns, use the order-* classes. These classes let you specify the order of a column relative to other columns in the same row. The * represents a number from 1 to 12, indicating the order position.

Example: Reorder columns using order classes

<div class="row">
  <div class="col order-3">
    <!-- Column content -->
  </div>
  <div class="col order-1">
    <!-- Column content -->
  </div>
  <div class="col order-2">
    <!-- Column content -->
  </div>
</div>

The visual order of the columns will be: the second column first, the third column second, and the first column last. The order-* classes determine the position of each column in the row.

You can also use responsive order classes to change the order of columns based on the screen size. The format for responsive order classes is order-{breakpoint}-*, where {breakpoint} is the screen size (sm, md, lg, xl) and * is the order position.

Example: Responsive order classes for different screen sizes

<div class="row">
  <div class="col order-3 order-md-1">
    <!-- Column content -->
  </div>
  <div class="col order-1 order-md-2">
    <!-- Column content -->
  </div>
  <div class="col order-2 order-md-3">
    <!-- Column content -->
  </div>
</div>

On small screens, the order will be: second column, third column, first column. On medium screens and up, the order will be: first column, second column, third column.

Bootstrap CSS Grid also lets you reverse the order of columns within a row using the flex-row-reverse class on the row. This reverses the order of all columns in the row.

Example: Reverse order of columns using flex-row-reverse class

<div class="row flex-row-reverse">
  <div class="col">
    <!-- Column content -->
  </div>
  <div class="col">
    <!-- Column content -->
  </div>
  <div class="col">
    <!-- Column content -->
  </div>
</div>

The columns will be displayed in reverse order, starting from the last column and ending with the first column.

Grid ordering in Bootstrap CSS Grid gives you control over the visual arrangement of columns, allowing you to create flexible and responsive layouts. By using order classes and the flex-row-reverse class, you can easily reorder and reverse the order of columns to suit your design needs.

Grid Gutters

Bootstrap CSS Grid has gutters (gaps) between columns. Gutters add space between columns, making the layout easier to read. Bootstrap CSS Grid uses a gutter size of 1.5rem (24px) on each side of a column by default.

You can change the size of the gutters by using the gx-* and gy-* classes on the row. The gx-* classes control the horizontal gutter size, while the gy-* classes control the vertical gutter size. The * is a number from 0 to 5, showing the size of the gutter.

Example: Changing Horizontal and Vertical Gutters

<div class="row gx-4 gy-2">
  <div class="col">
    <!-- Column content -->
  </div>
  <div class="col">
    <!-- Column content -->
  </div>
</div>

The horizontal gutter size is 4 (1.5rem or 24px) and the vertical gutter size is 2 (0.5rem or 8px). You can change these values to make the gutters between columns smaller or larger.

To remove the gutters, use the g-0 class on the row. This removes both the horizontal and vertical gutters, making the columns touch without any space.

Example: Removing Gutters

<div class="row g-0">
  <div class="col">
    <!-- Column content -->
  </div>
  <div class="col">
    <!-- Column content -->
  </div>
</div>

By using the g-0 class, the columns will have no space between them, making a seamless layout.

Changing and removing gutters in Bootstrap CSS Grid lets you control the space between columns and make layouts that fit your design needs. Bootstrap CSS Grid makes it easy to adjust the gutter size or remove them.

Grid Customization

Bootstrap CSS Grid lets you create custom grid classes and change grid variables using Sass. This allows you to tailor the grid system to your specific design needs.

To create custom grid classes, you can use the make-col-ready(), make-col(), and make-col-auto() mixins provided by Bootstrap. These mixins generate the necessary CSS for creating columns with different widths and behaviors.

The make-col-ready() mixin prepares the column by setting the position, width, and padding properties. The make-col() mixin sets the flex and max-width properties based on the specified size. The make-col-auto() mixin allows the column to size itself based on its content.

Example: Creating Custom Classes

.custom-col {
  @include make-col-ready();
  @include make-col(6);
}

A custom class .custom-col is created that spans 6 columns. You can replace the number 6 with any value from 1 to 12 to create columns of different widths.

Bootstrap CSS Grid also allows you to modify grid variables using Sass. By changing the values of these variables, you can customize the behavior and look of the grid system.

Some common grid variables you can modify include:

Variable	Description
`$grid-columns`	The number of columns in the grid system (default is 12).
`$grid-gutter-width`	The width of the gutters between columns (default is 1.5rem).
`$grid-breakpoints`	The breakpoint values for different screen sizes.
`$container-max-widths`	The maximum widths of the container at different breakpoints.

To modify these variables, you need to include the Bootstrap Sass files in your project and override the variables before importing Bootstrap.

Example: Modifying Variables

$grid-columns: 16;
$grid-gutter-width: 2rem;

@import "bootstrap/scss/bootstrap";

The number of columns is set to 16 and the gutter width is increased to 2rem. After modifying the variables, the bootstrap Sass file is imported to apply the changes to the grid system.

Customizing the grid system using custom classes and modifying variables gives you greater control over the layout of your web pages. You can create grid structures that match your design requirements and maintain a consistent look and feel throughout your project.

Remember to use Sass and include the necessary Bootstrap Sass files when customizing the grid system. This allows you to take advantage of the powerful features and flexibility provided by Bootstrap CSS Grid.

Practical Examples

Bootstrap CSS Grid is a tool for building responsive layouts. Let's look at an example of how to create a responsive layout using Bootstrap CSS Grid and combine it with other Bootstrap components.

Example: Building a Responsive Layout with Bootstrap CSS Grid

<div class="container">
  <div class="row">
    <div class="col-12">
      <header>
        <!-- Header content -->
      </header>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-8">
      <main>
        <!-- Main content -->
      </main>
    </div>
    <div class="col-12 col-md-4">
      <aside>
        <!-- Sidebar content -->
      </aside>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <footer>
        <!-- Footer content -->
      </footer>
    </div>
  </div>
</div>

In this example, the layout has three rows within a container. The first row has the header, which spans the full width of the container using the col-12 class. The second row is divided into two columns: the main content area spanning 8 columns on medium screens and up (col-md-8), and the sidebar spanning 4 columns on medium screens and up (col-md-4). On small screens, both the main content and sidebar span the full width using the col-12 class. The third row has the footer, which again spans the full width of the container.

By using responsive column classes, the layout adjusts based on the screen size. On small screens, the main content and sidebar stack vertically, while on medium screens and up, they appear side by side.

Bootstrap CSS Grid can be combined with other Bootstrap components to create rich and interactive layouts. For example, you can use Bootstrap's navigation bar, cards, and forms within the grid system.

Example: Combining Bootstrap CSS Grid with Other Bootstrap Components

<div class="container">
  <div class="row">
    <div class="col-12">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- Navbar content -->
      </nav>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-6 col-lg-4 mb-4">
      <div class="card">
        <!-- Card content -->
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 mb-4">
      <div class="card">
        <!-- Card content -->
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-4 mb-4">
      <div class="card">
        <!-- Card content -->
      </div>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-md-8 offset-md-2">
      <form>
        <!-- Form content -->
      </form>
    </div>
  </div>
</div>

In this example, the layout includes a navigation bar that spans the full width of the container. Below the navbar, there is a row with three columns, each containing a Bootstrap card component. The cards are responsive and adjust their width based on the screen size using classes like col-md-6 and col-lg-4. The mb-4 class adds margin at the bottom of each card for spacing.

Finally, there is a row with a form that is centered on the page using the offset-md-2 class. The form spans 8 columns on medium screens and up, leaving 2 columns of offset on each side.

These examples show how Bootstrap CSS Grid can be used to build responsive layouts and integrate with other Bootstrap components. You can create visually appealing and interactive layouts that adapt to different screen sizes.