Grids

Large Grid-Example

col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12

    
    <div class="row">
        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center">
                <p>col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12</p>
            </div>
        </div>
    </div>

Mid Grid-Example

col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6

col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6

    
    <div class="row">
        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center">
                <p>col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6</p>
            </div>
        </div>
        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center">
                <p>col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6</p>
            </div>
        </div>
    </div>

Three Grid-Example

col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4

col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4

col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4

    
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-primary text-white py-2 px-3">Primary</button>
            <button type="button" class="btn btn-primary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Primary</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-secondary text-white py-2 px-3">Secondary</button>
            <button type="button" class="btn btn-secondary text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Primary</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-success text-white py-2 px-3">Success</button>
            <button type="button" class="btn btn-success text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Success</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-info text-white py-2 px-3">Info</button>
            <button type="button" class="btn btn-info text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Info</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-warning text-white py-2 px-3">Warning</button>
            <button type="button" class="btn btn-warning text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Warning</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-danger text-white py-2 px-3">Danger</button>
            <button type="button" class="btn btn-danger text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Danger</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-dark text-white py-2 px-3">Dark</button>
            <button type="button" class="btn btn-dark text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Dark</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-2 me-2 d-inline-block">
        <div class="btn-group">
            <button type="button" class="btn btn-light text-white py-2 px-3">Light</button>
            <button type="button" class="btn btn-light text-white py-2 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Light</span>
            </button>
            <ul class="dropdown-menu bg-white">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

Four Grid-Example

col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3

col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3

col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3

col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3

    
    <div class="row">
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center mb-4">
                <p>col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3</p>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center mb-4">
                <p>col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3</p>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center mb-4">
                <p>col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3</p>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3">
            <div class="bg-primary bg-opacity-10 p-5 rounded-3 text-center mb-4">
                <p>col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-3</p>
            </div>
        </div>
    </div>

Twelve Grid-Example

col

col

col

col

col

col

col

col

col

col

col

col

    
    <div class="row">
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
        <div class="col">
            <div class="bg-primary bg-opacity-10 p-3 rounded-3 text-center mb-4">
                <p>col</p>
            </div>
        </div>
    </div>