Grid

Attention! Add the div elements with the classes .row and .col-- as standalone elements, do not place them on existing elements. Maintain a correct hierarchy.

Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns. For example, to create a layout with three equal-width columns, you can use three columns each with a width of 4 (i.e., .col-**-4).

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

Grid Classes

The Bootstrap grid system has four classes:

  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs. 

Grid System Rules

Here are some important rules to keep in mind when using the Bootstrap grid system:

  • Rows must be placed within a .container or .container-fluid for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Grid columns are created by specifying the number of the 12 available columns you wish to span.
  • Column widths are in percentages, so they are always fluid and sized relative to their parent element.

These rules help ensure consistency and responsiveness across different screen sizes.

Basic Structure of a Bootstrap Grid

To create a layout using the Bootstrap grid system, follow these steps:

  1. Create a container (.container) to wrap your content.
  2. Within the container, create a row (.row).
  3. Inside the row, add the desired number of columns, making sure they add up to twelve for each row.

This structure ensures proper alignment and responsiveness of your layout.

The following is a basic structure of a Bootstrap grid:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

So, to create the layout you want, create a container ( <div class="container"> ). Next, create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Grid Options

The following table summarizes how the Bootstrap grid system behaves across different devices:

  Extra small
<768px		 Small
>=768px		 Medium
>=992px		 Large
>=1200px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Suitable for Phones Tablets Small Laptops Laptops & Desktops
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
# of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Usage

When utilizing our grid system, it's common practice to integrate panels for organizing and presenting content effectively. Panels serve as containers for various components within the grid, providing structure and visual hierarchy.

Buttons or links within the grid can be incorporated into panel headers or bodies, enhancing user interaction and navigation. For consistency, it's recommended to maintain a cohesive design language, aligning panel styles with the overall aesthetic of the web application.


Bootstrap Grid Classes

The Bootstrap grid system consists of several classes:

  • .container: Creates a fixed-width container to hold the content.
  • .row: Creates a row within a container to hold columns.
  • .col-*-*: Defines the width of columns based on screen size.
  • .container-fluid: Creates a full-width container.
  • .offset-*: Adds margin to columns.
  • .row-cols-*: Sets the number of columns in a row.
  • .align-items-* and .justify-content-*: Controls alignment of elements within a flex container.

Example: Explanation of col-lg-6 Class

The col-lg-6 class is commonly used to define column widths for large screens. It specifies that the column should occupy half of the available width on screens categorized as "large" according to Bootstrap's breakpoints.

This class is often used in combination with other classes to create responsive layouts that adapt to different screen sizes.

Best Practices:

  • Consistency: Maintain consistency in the use of grid elements throughout the application to ensure a cohesive user experience.
  • Flexibility: Design grids to accommodate varying content lengths and types, ensuring that the layout remains visually appealing and functional across different contexts.
  • Accessibility: Prioritize accessibility by adhering to semantic HTML practices and providing alternative text for non-textual grid elements, facilitating use by screen readers and assistive technologies.

By adhering to these best practices, you can create grids that effectively organize content and enhance user interaction within our web application.


Content Considerations:

When working with grid layouts, it's essential to consider the following factors:

  • Content Hierarchy: Determine the hierarchical structure of your content and reflect it in the grid layout, prioritizing the most important information for optimal user engagement.
  • Responsive Design: Design grids to be responsive, ensuring they adapt seamlessly to various screen sizes and devices, maintaining usability and readability across all platforms.
  • Performance: Keep grid performance in mind, especially when dealing with large datasets or complex layouts. Implement optimization techniques such as lazy loading or server-side rendering to enhance performance and user experience.

Examples

The next chapters shows examples of grid systems for different devices:


Source: w3schools