Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Complete Guide to Understanding How Bootstrap Grid Works

The Bootstrap Grid system is one of the building blocks of Bootstrap. It lets you customize the layout of your website so they adjust to various screen sizes.

If you’re looking to learn about the grid system in Bootstrap, then you’ve come to the right place.

In this tutorial, we’ll briefly cover how Bootstrap works before proceeding to explain the Bootstrap Grid system.

Brief Overview of the Bootstrap Framework

Bootstrap is a popular front-end framework that’s essential for web developers, especially when starting out. It’s a collection of pre-written CSS and JavaScript code that helps in building responsive and mobile-first websites.

Think of it as a toolkit that simplifies your web design process. It offers ready-to-use components like navigation bars, dropdowns, and buttons, saving time and effort.

Definition and Purpose of the Grid System

Moving on to the grid system, a core component of Bootstrap. It’s a layout tool that divides the webpage into rows and columns, creating a structure to place your content.

The grid system uses a series of containers, rows, and columns to align and distribute your content evenly. It’s based on a 12-column structure, which you can think of as a flexible framework that supports various layouts.

The purpose is to provide a consistent, organized way to design web pages that are aesthetically pleasing and easy to navigate. The grid system is beneficial in creating responsive designs, as it adjusts the layout based on the screen size.

Importance of Responsive Design

Responsive design is no longer a luxury; it’s a necessity. It refers to the ability of a website to adapt its layout to various screen sizes and devices. The goal is to ensure that your website looks and functions well whether it’s viewed on a desktop, a tablet, or a smartphone.

This is important because it greatly affects user experience. A website that isn’t responsive can be difficult to navigate on smaller screens, leading to frustrated users and potentially less traffic. Bootstrap’s grid system plays a key role in facilitating responsive design. It helps in creating flexible layouts that automatically adjust according to the device’s screen size.

Speaking of responsive design, PureCode provides a list of 10k AI-generated templates to speed up your workflow. Our templates include form components to help you quickly create responsive layouts and components.

Get Started With PureCode

Understanding the Bootstrap Grid System

Basic Concepts of the Grid System

The Bootstrap Grid System is built on a series of rows and columns that help organize content on your webpage. It’s based on a flexible 12-column layout, which means you can divide each row into up to 12 columns. This system is responsive, meaning it automatically adjusts your content to fit different screen sizes – from large desktop monitors to small mobile phones.

Imagine your webpage is a bookshelf. The grid system helps you decide how many shelves (rows) you need and how to divide each shelf into sections (columns) for your books (content). This setup provides consistency and harmony to the layout of your page, ensuring everything aligns beautifully and is easy to read.

The Structure of Rows and Columns

In the Bootstrap grid system, the entire page is wrapped in a container. Inside this container, you place rows (<div class=”row”>). These rows are horizontal groups where your content will sit. Within each row, you can add columns (<div class=”col”>). The columns are where your actual content (text, images, etc.) goes.

Each column’s width is a fraction of the total container width. You can decide how many of the 12 available columns a particular piece of content should span. For example, if you want a column to take up half the screen’s width on a large device, you would use <div class=”col-lg-6″>. This flexibility allows for intricate and varied layouts while keeping everything neat.

Container Types: .container vs .container-fluid

Now, let’s talk about the two types of containers in Bootstrap: .container and .container-fluid.

  1. .container: This is the standard container. It’s responsive, meaning its width changes at different breakpoints (screen sizes). The .container class provides a responsive fixed-width container, which is centered on the page with margin-left and margin-right auto.

  2. .container-fluid: This container is full-width, spanning the entire width of the viewport. It’s like a mural that covers the whole wall from edge to edge. Use .container-fluid when you want your content to use up the entire width of the screen, regardless of the device size.

ContainerContainer Fluid
DescriptionThe .container class is used for a responsive fixed-width container. It means that the maximum width of the container changes at different screen sizes, but within each breakpoint, the width is fixed.The .container-fluid class is for a full-width container, spanning the entire width of the viewport.
Class.container.container-fluid
When to use?It is a good choice when you need a centered, fixed-width layout.It’s a good choice when you want your content to use up the whole width of the screen, regardless of the device.

Working with Columns and Rows

In Bootstrap, the fundamental building blocks of your layout are rows and columns. You start by defining a row, and within this row, you can create multiple columns. Here’s a simple example:

<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>

In this snippet, we’ve created a row with three equal columns inside a container. Each column will take up an equal amount of space within the row. If you add more columns than the default 12-column grid can hold, they will automatically wrap onto a new line.

Understanding Grid Tiers and Breakpoints

Bootstrap’s grid system includes five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), xl (extra large), and xxl (extra extra large). These tiers are used for different screen sizes and resolutions.

  • xs: <576px

  • sm: ≥576px

  • md: ≥768px

  • lg: ≥992px

  • xl: ≥1200px

  • xxl: ≥1400px

These breakpoints allow you to specify how columns behave on different devices. For example, you might want a column to take the full width on mobile devices (xs) but only a fraction of the width on larger screens.

Column Classes and Their Behaviors Across Breakpoints

Bootstrap’s column classes are used to specify the number of columns you’d like to span. For example, col-md-4 means the column will span 4 of the 12 columns on medium-sized screens and larger. On smaller screens, it’ll automatically take the full width unless specified otherwise.

Here’s an example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Column 1</div>
    <div class="col-6 col-md-4">Column 2</div>
    <div class="col-6 col-lg-2">Column 3</div>
  </div>
</div>

In this layout:

  • Column 1 takes the full width on extra small devices (col-12), but on medium devices and larger, it takes two-thirds of the width (col-md-8).

  • Column 2 takes half the width on extra small devices (col-6) and one-third on medium devices (col-md-4).

  • Column 3 also takes half the width on extra small devices (col-6), but it adjusts to one-sixth of the width on large devices (col-lg-2).

This system gives you immense flexibility. You can create complex, responsive layouts that look great on any device. The grid adjusts based on the screen size, ensuring your content is always displayed optimally.

Customizing Columns

Customizing columns in Bootstrap involves adjusting widths to fit your content. It also involves reordering columns to enhance readability or visual appeal and using offset classes to create balanced, user-friendly layouts.

Adjusting Column Widths

In Bootstrap, column widths are primarily controlled by the grid system, which is based on a 12-column layout. You can adjust the width of a column by specifying the number of these 12 columns it should occupy at various breakpoints. Let’s see an example:

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

In this example, each column (col-sm-4) occupies 4 out of 12 columns on small (sm) devices and above. On extra-small devices, they automatically take up the full width since no col-xs-* class is specified.

Column Ordering and Reordering

Bootstrap 4 introduced the order- class for controlling the order of columns. This is incredibly useful when you want to rearrange content based on screen size. Here’s how you can use it:

<div class="container">
  <div class="row">
    <div class="col-md-8 order-md-2">First, but second on md</div>
    <div class="col-md-4 order-md-1">Second, but first on md</div>
  </div>
</div>

In this layout, the columns will switch places when viewed on medium-sized devices and above.

Offset, Push, and Pull Classes

Offsets are used to create extra space before a column. Bootstrap 5 has replaced the offset- classes with margin utilities, but let’s see how it worked in Bootstrap 4:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

This creates a gap equivalent to 4 columns between the two columns.

In Bootstrap 4, push and pull classes allowed you to change the order of columns visually:

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Here, the first column is pushed to the right, and the second is pulled to the left. However, in Bootstrap 5, this system has been replaced with the more flexible order- classes.

Nesting Columns and Rows

In Bootstrap, you can nest rows and columns within another column. This allows you to create a finer grid system within a larger one, offering more control over your layout. Here’s how you can do it:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Main Column 1</p>
      <div class="row">
        <div class="col-md-6">
          <p>Nested Column 1</p>
        </div>
        <div class="col-md-6">
          <p>Nested Column 2</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <p>Main Column 2</p>
    </div>
  </div>
</div>

In this example, we have two main columns each taking up half the width of the container. Inside the first main column, we have another row with two nested columns. Each nested column takes up half the width of its parent column.

Managing Nested Layouts

When managing nested layouts, keep a few key points in mind:

  1. Maintain Hierarchies: Ensure your nested rows and columns are properly enclosed within a parent column. This maintains the structural integrity of your layout.

  2. Responsive Considerations: Remember that each nested level will inherit the constraints of its parent. For instance, if a parent column spans four grid columns on a medium screen, the nested columns within must share those four columns.

  3. Avoid Excessive Nesting: While nesting provides flexibility, too much can make your layout overly complex and harder to maintain. Aim for simplicity and clarity.

  4. Mind the Gaps: Each row in Bootstrap has horizontal padding (gutters) for spacing content. When you nest rows, these gutters will apply to the nested rows as well. You might need to adjust paddings or margins accordingly to align your content as desired.

  5. Column Resetting: In deeply nested structures, sometimes you might want to reset the columns for smaller devices. You can do this by adding a new .row and starting your column count afresh.

Responsive Utility

Bootstrap’s responsive utilities are incredibly powerful for fine-tuning your layout for different devices.

Visibility Classes (Show/Hide Elements at Different Sizes)

Visibility classes in Bootstrap allow you to show or hide elements depending on the screen size. This can be particularly useful for optimizing the layout and content for various devices.

Example: Using Visibility Classes

<div class="d-none d-sm-block">Visible on small devices and up</div>
<div class="d-block d-sm-none">Visible on extra small devices only</div>
<div class="d-none d-md-block">Visible on medium devices and up</div>

In these examples:

  • The first div is hidden on extra-small devices (d-none) but becomes visible on small devices and larger (d-sm-block).

  • The second div is visible only on extra-small devices (d-block d-sm-none).

  • The third div is hidden on small devices and becomes visible on medium devices and larger (d-none d-md-block).

Alignment and Spacing Classes for Responsiveness

Bootstrap also provides classes for alignment (text, vertical, horizontal) and spacing (margin, padding) that are responsive. These classes follow the pattern of {property}{sides}-{size} for spacing and {property}-{breakpoint}-{value} for alignment.

Example: Using Alignment and Spacing Classes

<!-- Text alignment -->
<p class="text-center text-md-left">This text is centered but aligns left on medium screens and up.</p>

<!-- Spacing -->
<div class="mt-0 mt-md-3">This div has a top margin on medium devices and up.</div>

In these examples:

  • The paragraph (<p>) tag uses text alignment classes. It’s centered on all devices (text-center) but aligns to the left on medium (md) devices and larger (text-md-left).

  • The div has a class for margin-top. It has no margin on top by default (mt-0), but on medium and larger screens, it gets a margin-top of 3 (mt-md-3).

Advanced Grid Features

Bootstrap’s grid system is not just about rows and columns. It also integrates flexbox, a powerful CSS layout model, to provide advanced layout capabilities. Let’s explore how you can use flexbox properties with the Bootstrap grid and create complex layouts using advanced grid techniques.

Using Flexbox Properties with the Grid

Flexbox properties in Bootstrap allow you to control the alignment and ordering of grid columns and rows. These properties are incredibly useful for creating responsive and versatile layouts.

Example: Flexbox with Grid

<div class="container">
  <div class="row d-flex justify-content-between">
    <div class="col-3">Column 1</div>
    <div class="col-3">Column 2</div>
    <div class="col-3">Column 3</div>
  </div>
</div>

In this example:

  • The row class has been combined with d-flex to enable flex properties.

  • justify-content-between spreads out the columns evenly within the row. So even if the column width doesn’t add up to 12, the content adjusts to fix the layout.

Creating Complex Layouts with Advanced Grid Techniques

The Bootstrap grid system can be used to create more complex layouts by combining different grid options. This includes using nested grids, varying column sizes, and utilizing offset classes.

Example: Complex Layout with Advanced Grid

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Main Column 1</p>
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <p>Nested Offset Column</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="d-flex align-items-center justify-content-center" style="height: 100px;">
        <p>Centered Content</p>
      </div>
    </div>
  </div>
</div>

In this layout:

  • The first col-md-6 contains another nested row with an offset column, creating a complex structure within the main column.

  • The second col-md-6 uses flexbox properties (d-flex, align-items-center, justify-content-center) to center content both vertically and horizontally.

Best Practices and Performance Optimization

When working with Bootstrap’s grid system, it’s crucial to follow best practices and focus on performance optimization to ensure a seamless user experience. Let’s break down these concepts and include some code examples for clarity.

Ensuring Accessibility in Grid Layouts

Accessibility in web design means making sure your website is usable by as many people as possible, including those with disabilities. Here’s how you can ensure accessibility in Bootstrap grid layouts:

  1. Semantic HTML: Use appropriate HTML elements for your content. For example, use <header>, <footer>, <section>, etc., to define the structure of your page.

  2. ARIA (Accessible Rich Internet Applications) Roles: Use ARIA roles to help screen readers understand the purpose of different elements.

    <div class="row" role="navigation">...</div>
    <div class="row" role="main">...</div>
  3. Keyboard Navigation: Ensure that all interactive elements are navigable using a keyboard.

  4. Responsive Font Sizes: Use relative units like em or rem for font sizes to ensure text scales properly on different devices.

Performance Tips for Faster Loading Times

Optimizing your grid layout for performance can significantly improve your website’s loading times. Here are some tips:

  1. Optimize CSS and JavaScript: Use minified versions of Bootstrap’s CSS and JavaScript files. Also, remove any unused CSS or JavaScript to reduce file sizes.

  2. Content Loading Strategies: Implement lazy loading for images and other heavy content, loading them only when they’re about to enter the viewport.

    <img src="image.jpg" loading="lazy" alt="description">
  3. Use CDN for Bootstrap Files: Instead of hosting Bootstrap files on your server, use a Content Delivery Network (CDN) to load them faster.

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  4. Optimize Images: Compress images without losing quality to decrease the loading time.

  5. Browser Caching: Leverage browser caching for Bootstrap files if you host them on your server.

  6. Mobile-First Approach: Design for smaller screens first and then scale up. This approach typically leads to more performance-friendly designs.

Frequently Asked Questions

Here are answers to some of the top questions developers ask about the Bootstrap grid system.

Can I Create Custom Grid Layouts in Bootstrap?

Yes, you can create custom grid layouts in Bootstrap. While Bootstrap comes with a default 12-column grid system, you can customize it to suit your specific needs. This can be done by modifying the Bootstrap source SASS/SCSS files. You can change the number of columns, the gutter width, and the breakpoints to create a grid system that matches your design requirements.

How Do I Make a Grid Layout Responsive?

To make a grid layout responsive in Bootstrap, use the grid classes that correspond to different screen sizes. For instance, col-sm-* for small screens, col-md-* for medium screens, etc. The layout automatically adjusts as the viewport changes size. Additionally, use container classes like .container (fixed-width) or .container-fluid (full-width) to control the overall layout responsiveness.

Final Thoughts on Bootstrap Grid

That’s It! Now you fully understand how the Bootstrap Grid system and how you can use it to build responsive websites.

When building web applications with Bootstrap, you should ensure your website adapts well to various screen sizes. This is why the Bootstrap Grid is essential.

At PureCode, we help you build User Interfaces faster than your competitors by providing ready-made components to build any aspect of your website.

Check out some of our templates.

Further Reading

If you enjoyed this content, here are other tutorials to help you become a better Bootstrap developer.

David Ozokoye

David Ozokoye

Software Engineer and Technical Writer