How to Switch up Grids by Making 5-Column Bootstrap Layouts

When building responsive websites and web apps with Bootstrap, most developers default to variants of the standard 12-column grid. But what if your design calls for something more unconventional, like a 5-column Bootstrap layout?

Whether you’re building a product showcase, dashboard, or content-heavy interface, you can use a 5-column layout as a unique and equally aesthetic alternative. In this guide, you’ll learn how to build a custom 5-column layout. Additionally, you’ll gain insights about responsiveness tips, advanced Bootstrap techniques, and whether to use Bootstrap or CSS Grid.

By the end, you’ll have the tools and understanding needed to go beyond default layouts and create something functional and unique, like this Bootstrap editor built with Froala. Let’s get started!

Why Should You Choose a 5-Column Bootstrap Layout?

Bootstrap’s 12-column grid system is versatile, but opting for a 5-column layout gives you a unique way to structure content. It breaks away from the usual 2-, 3-, or 4-column setups, giving you new ways to play with multi-column layouts in Bootstrap.

For instance, 5-column Bootstrap layouts are significantly helpful when designing image galleries, complex data dashboards, or even social media content. Such a layout allows either equal or variable width distributions while retaining the core responsiveness of the Bootstrap framework. Additionally, you won’t be constrained by the “factors of 12” limitation of the default grid system.

Now, before you dive deep into creating a custom Bootstrap layout with 5 columns, let’s first explore Bootstrap’s grid system.

Understanding the Grid System

Modern websites rely heavily on responsiveness and compatibility. For instance, developers need to ensure that the user interface and experience will remain consistent no matter the platform or screen size.

Normally, this involves some CSS, which has honestly gotten easier with the introduction of CSS Grid. But with Bootstrap, implementing a grid layout is more straightforward, letting developers build the UI faster.

Bootstrap’s grid system helps developers and designers create responsive, mobile-first designs easily and rapidly. In this section, you’ll have a refresher on how it works and how you can use the 5-column layout as an alternative.

How Does Bootstrap’s Default Grid System Work?

Bootstrap’s grid system uses flexbox to emulate aligning and organizing content into containers, rows, and columns. By default, it uses 12 columns of equal widths for a full-width row. This allows you to combine columns in different ways as long as the combinations are factors of 12.

For example, you can “slice” up a 12-column row into four .col-3, three .col-4, two .col-6, and more columns. You can even set up variable-width columns (e.g., two .col-5 plus one .col-2) for versatility. Additionally, you can nest these columns and rows or alter their behavior depending on the screen size breakpoint.

Here are some other concepts from the Bootstrap grid documentation:

• As of Bootstrap 5, there are six default grid breakpoints, starting from extra small (xs) to extra extra large (xxl).
• Grid breakpoints include the specific media query breakpoint and all breakpoints larger than it. For example, a .col-md-4 column affects the breakpoints md, lg, xl, and xxl.
• You can customize gutters to change the spaces between each column.
• You can set columns to have equal or variable widths. Moreover, you can set only one column width and have the other columns automatically resize around it.
• It’s possible to customize grid layouts using Sass.

The 5-Column Bootstrap Layout: A Novel Alternative

The 5-column layout deviates slightly from the standard one and is useful for different scenarios. But what is it, really? Well, it refers to having 5 columns per row, whether visually or intrinsically.

To illustrate it better, let’s say we want to create an image repository app (i.e., a web app that displays images like Pinterest). In the app, we want to display 5 images per row, wherein 1 column contains each image.

If you use Bootstrap, you might wonder if you can divide the 12 columns equally into 5. The answer is yes, you can! Luckily, there are different ways to achieve this, which you’ll see in the next section.

Creating a 5-Column Bootstrap Layout

Bootstrap 5+ doesn’t have a .col-2.4 (as in 12 columns divided by 5) class by default. Thankfully, you can still easily implement a 5-column Bootstrap layout.

All methods shown below work well, so you’ll have to choose depending on what you need. Also, other layout methods possibly exist, but for now, you’ll learn about the most popular ones.

Method 1: Equal-Width Flex Columns

Need dynamic column sizing? This method involves specifying neither a column breakpoint nor column width. By doing so, Bootstrap will automatically assign an equal width to each column.

To do this, try copying the following lines of code:

<div class="container-fluid bg-light vh-100">
   <div class="row h-25 text-center">
       <div class="col h-100 bg-success">
           1
       </div>
       <div class="col h-100 bg-info">
           2
       </div>
       <div class="col h-100 bg-danger">
           3
       </div>
       <div class="col h-100 bg-warning">
           4
       </div>
       <div class="col h-100 bg-primary">
           5
       </div>
   </div>
</div>

The code above splits the row into 5 columns without any specific width. If you run this, you’ll see something like the following image:

This method works well when you’re displaying a fixed number of columns, like five equally spaced items in a row. However, it’s not ideal for layouts that need to support a dynamic or growing number of columns, such as a Pinterest-style grid.

If you add more than five columns, they won’t automatically wrap to the next line. Instead, all the columns stay in a single row, stretching beyond the container and breaking the layout, as shown in the image below.

In the second image, you can see that all 8 columns are placed side by side in one row instead of wrapping to form a second line. This happens because Bootstrap’s .col classes are based on a 12-column grid system. When using equal-width .col without specifying breakpoints or limits, Bootstrap doesn’t automatically wrap the columns unless their combined width exceeds 12 units.

Method 2: Custom CSS Class

Prefer using CSS with Bootstrap? The second method involves using a custom .col class within a Bootstrap row. Compared to the first, this takes care of automatically wrapping excess columns.

To get started, replace the code earlier with the following:

<div class="container-fluid bg-light vh-100">
     <div class="row h-25 text-center">
          <div class="custom-col h-100 bg-success">
               1
          </div>
          <div class="custom-col h-100 bg-info">
               2
          </div>
          <div class="custom-col h-100 bg-danger">
                3
          </div>
          <div class="custom-col h-100 bg-warning">
                4
          </div>
          <div class="custom-col h-100 bg-primary">
                5
          </div>
          <div class="custom-col h-100 bg-info">
                6
          </div>
          <div class="custom-col h-100 bg-danger">
               7
          </div>
          <div class="custom-col h-100 bg-warning">
               8
          </div>
     </div>
</div>

Additionally, you’ll need to add some custom CSS for the custom columns:

.custom-col{
    flex: 0 0 20%;
    max-width: 20%;
}

This custom CSS ensures that a column with this class takes up exactly 20% of the container’s width. The shorthand code represents “flex-grow: 0; flex-shrink: 0; flex-basis: 20%.” This means that

• The column won’t grow to fill extra space.
• It won’t shrink if the container is too small.
• The initial width of the column is set to 20% of the container’s width.

In simpler terms, the first line essentially locks the column’s size at 20%. The second line, on the other hand, ensures that the column width’s limit never exceeds 20%, even if you have more available space. Now, if you run this code, you’ll see something like the following image:

By creating a custom class, you’re able to control how many columns you can display per row. And this is great, especially if you want to experiment more with CSS and customization. However, there’s an even simpler way that involves Bootstrap.

Method 3: Bootstrap’s .row-cols Classes

Want an easy and pure Bootstrap solution? Bootstrap v5+ offers responsive row-cols-* classes that allow you to easily set how many columns should appear per row. When the number of columns exceeds the specified count (e.g., 5), the extra columns will wrap to the next line, starting a new row.

Insert the following code to test out the built-in class for a 5-column Bootstrap layout:

<div class="container-fluid bg-light vh-100">
     <div class="row row-cols-5 h-25 text-center">
          <div class="col h-100 bg-success">
               1
          </div>
          <div class="col h-100 bg-info">
               2
          </div>
          <div class="col h-100 bg-danger">
               3
          </div>
          <div class="col h-100 bg-warning">
               4
          </div>
          <div class="col h-100 bg-primary">
               5
          </div>
          <div class="col h-100 bg-info">
               6
          </div>
          <div class="col h-100 bg-danger">
               7
          </div>
          <div class="col h-100 bg-warning">
               8
          </div>
     </div>
</div>

If you run this, you’ll notice that you’ll get exactly the same result as method 2 without any CSS. This is ideal if you wish to make the most of Bootstrap, allowing you to create 5-column layouts with ease.

Which Method Should I Use?

The answer depends completely on your use case, but you’ll end up using method 2 or 3 in most cases. That’s because method 1 doesn’t work too well for dynamic content.

For instance, if you’re making a layout for hundreds of products, method 1 might make the width of each column too small. With methods 2 and 3, you can specify the width for each column, giving you enough space to display each product in an organized manner.

Method 2 (custom CSS) does the job usually, but if you’re using Bootstrap, you’d want to keep using Bootstrap for most things. So unless you have very specific CSS requirements that Bootstrap can’t handle, you should stick to using Method 3 (row-cols).

CSS Grid vs. Bootstrap: Which Is Better for You?

A few years ago, CSS released an official way to handle grids. Since then, developers and designers have had an easier time creating responsive layouts using only CSS. But should you use CSS grid or a framework like Bootstrap? Let’s explore both layout solutions.

CSS Grid for Precise Control

CSS Grid is ideal when you need fine-tuned control over complex, two-dimensional layouts. It lets you define both rows and columns explicitly, making it perfect for custom designs where alignment and spacing are key.

Sure, it involves more work compared to Bootstrap. But if you prefer control and customization over rapid development, CSS Grid might work better for you.

Bootstrap for Rapid Prototyping

Bootstrap shines when you need to build responsive layouts quickly and easily. Its predefined grid system and utility classes help you prototype fast without worrying about writing layout CSS from scratch.

And should you need more customization, you can easily customize Bootstrap classes as well, either with custom CSS or even Sass. So if you prioritize speed and scalability, Bootstrap might suit your needs.

Whichever you choose is up to you. You can even mix the two layout solutions if the situation calls for it. Be sure to assess your (and your clients’) needs first, and choose the one that will benefit you more.

Advanced Bootstrap Techniques

Before you start creating your own designs using Bootstrap, you might want to experiment first with a few advanced Bootstrap techniques.

Column Nesting

Bootstrap allows nesting columns within existing columns. This is useful when you want to have subsections within a single column. For example, we can replace a column from the earlier code with the following:

<div class="col h-100 bg-success">
     <div class="row h-50">
          <div class="col bg-success">
               1.1
          </div>
          <div class="col bg-light">
               1.2
          </div>
     </div>
     <div class="row h-50">
          <div class="col bg-danger">
               1.3
          </div>
          <div class="col bg-warning">
               1.4
          </div>
          <div class="col bg-primary">
               1.5
          </div>
     </div>
</div>

Afterwards, refresh the page to see the following result:

Notice how the first column from earlier is now divided into two rows, with each row having a different number of columns. This advanced technique allows you to create more complex layouts using Bootstrap.

Flexbox Utilities

Use classes like .d-flex, .justify-content-between, or .align-items-center to control layout behavior. These utilities allow you to control how both child and parent elements interact with one another.

Offsets and Hidden Classes

Create whitespace or reposition content with .offset-* classes. To show or hide columns based on screen size, use “hidden” classes such as .d-none, .d-md-block, and so on. A combination of these classes helps improve responsiveness and, in turn, the user interface and experience.

Tips for Creating Fluid Layouts

If you want pristine layouts across any screen size, you should consider these quick tips:

Use .container-fluid for Full-Width Sections

If you want your layout to span the entire screen width, wrap it in a .container-fluid div element instead of the default .container class. This creates fluid layouts in Bootstrap that feel modern and immersive (e.g., perfect for a landing page).

Improve Spacing using Utilities

Bootstrap includes dozens of utility classes (e.g., margins, paddings, etc.). Use and experiment with them for consistent spacing and cleaner code no matter the user’s device.

Ensure Cross-Browser Support

Bootstrap works on most modern browsers, but as an extra precaution, test your layout on multiple screen sizes and browsers. Responsive design is about real-world usability, so you should follow Bootstrap’s mobile-first philosophy (and continue building for larger screens) if you use it.

Conclusion

Creating a 5-column Bootstrap layout gives you creative flexibility beyond the usual grid. With the right combination of customization, responsive breakpoints, and Bootstrap’s built-in classes, you can build clean, scalable, and engaging designs.

Whether you’re developing dashboards, image galleries, or product catalogs, mastering these techniques will help you leverage Bootstrap more effectively. It might even help you stand out in a sea of templated websites. Keep experimenting, and don’t be afraid to mix in custom logic or even CSS Grid where it makes sense!