Home >Web Front-end >CSS Tutorial >How Can I Create Multi-Row Columns with Bootstrap?

How Can I Create Multi-Row Columns with Bootstrap?

DDD
DDDOriginal
2024-12-13 10:59:25872browse

How Can I Create Multi-Row Columns with Bootstrap?

Creating Multi-Row Bootstrap Columns

You can often enhance the layout of your Bootstrap grids by having certain columns span multiple rows. This technique can be particularly useful for creating visually appealing grids with varying content heights, such as in the example provided:

[Image of a grid with a single column spanning two rows]

Bootstrap 3

To achieve this effect in Bootstrap 3, you can use nested rows and columns. Here's how:

<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

The above is the detailed content of How Can I Create Multi-Row Columns with Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn