How can I create a 5-column layout in Bootstrap?-CSS Tutorial-php.cn

How can I create a 5-column layout in Bootstrap?

Patricia Arquette

Release： 2024-10-27 10:05:31

Original

378 people have browsed it

How can I create a 5-column layout in Bootstrap?

Bootstrap - Creating a 5-Column Layout

In Bootstrap, creating a layout with five full-width columns can be achieved using the following methods:

Option 1: Auto-Layout Grid (Bootstrap 4)

For Bootstrap 4, utilize the auto-layout grid to create five equal-width, full-width columns:

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

Copy after login

Option 2: Clearfix Break (Bootstrap 4)

To wrap the columns within the same row, insert a clearfix break after every five columns:

<code class="html"><div class="container">
    <div class="row">
        <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-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

Copy after login

Option 3: row-cols-5 Class (Bootstrap 4.4 )

For Bootstrap versions 4.4 and later, use the row-cols-5 class on the row element:

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

Copy after login

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