You can remove the default gutters between columns to create compact layouts by adding the class .g-0 on .row. This class removes the negative margins from row and the horizontal padding from all immediate children columns. Here’s an example:

Example

<div class="row g-0">
    <div class="col-4">Column one</div>
    <div class="col-4">Column two</div>
    <div class="col-4">Column three</div>
</div>

Breaking Columns to a New Line

You can also create equal-width columns that span multiple rows by inserting a <div> with .w-100 class where you want the columns to break to a new line. Additionally, you can make these breaks responsive by combining the .w-100 class with responsive display utility classes.

Example

<div class="container">
    <!-- Break columns on all devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Break columns on all devices except extra large devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

We hope you’ve understood the basics of new Bootstrap 5 grid system. In next few chapters you’ll learn how to create basic web page layouts using this flexbox grid system.