How to create a 5-column layout in Bootstrap 4?

Bootstrap - 5 column layout

You want to achieve a 5 column full width layout using Bootstrap but haven't found a solution that suits your needs.

Bootstrap 4 offers a simple solution using the auto-layout grid. To create 5 equal, full-width columns, use the following code:

<code class="html"><div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div></code>

This solution works because Bootstrap 4 uses flexbox. To wrap the columns within the same row, use a clearfix break such as

or

every 5 columns.

For Bootstrap 4.4 and later, you can use the row-cols-5 class on the row:

<code class="html"><div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div></code>

The above is the detailed content of How to create a 5-column layout in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!