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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-5 rounded-10 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-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
	<div class="col">
		<div class="bg-gray-div7 p-3 rounded-10 text-center mb-4">
			<p>col</p>
		</div>
	</div>
</div>