How to Create a Bootstrap Column Spanning Multiple Rows?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to Create a Bootstrap Column Spanning Multiple Rows?

Dec 14, 2024 pm 03:10 PM

How to Create a Bootstrap Column Spanning Multiple Rows?

Creating a Bootstrap Column that Spans Multiple Rows

You're aiming to construct a Bootstrap grid with a specific layout:

The challenge lies in creating box 1, which spans two rows.

For Bootstrap 3:

To achieve this in Bootstrap 3, utilize the following HTML structure:

&lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;well&quot;&gt;1
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;br/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-8&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;div class=&quot;well&quot;&gt;2&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;div class=&quot;well&quot;&gt;3&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;div class=&quot;well&quot;&gt;4&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-6&quot;&gt;
                &lt;div class=&quot;well&quot;&gt;5&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;well&quot;&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;well&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;well&quot;&gt;8&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

Copy after login

The above is the detailed content of How to Create a Bootstrap Column Spanning Multiple Rows?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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