Zapped - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Structure

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Preview
HTML

One of three columns

														
<div class="container">
	<div class="row">
		<div class="col">
		Column
		</div>
		<div class="col">
		Column
		</div>
		<div class="col">
		Column
		</div>
	</div>
</div>

Grid System

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Column ordering	Yes

Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.

Mix and match

Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

Preview
HTML

.col-md-8

.col-6 .col-md-4

.col-md-8

.col-6 .col-md-4

.col-6

														
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
	<div class="col-md-8">.col-md-8</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
	<div class="col-6">.col-6</div>
	<div class="col-6">.col-6</div>
</div>
</div>

Gutters

Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px) wide.

One of three columns

One of two columns

														
<!-- Gutter width 3rem with gx-5 -->
<div class="container">
<div class="row gx-5">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>

<!-- Gutter width 3rem with gx-1 -->
<div class="row gx-3">
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>
</div>

Class	Values
`class="row g-/gy-/gx-[Value]"`	1/2/3/4/5

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.you can use.order-xxl- for xxl width.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

														
<div class="container">
<div class="row">
	<div class="col order-last">
	First in DOM, ordered last
	</div>
	<div class="col">
	Second in DOM, unordered
	</div>
	<div class="col order-first">
	Third in DOM, ordered first
	</div>
</div>
</div>

Class	Values
`class="col order-[value]"`	1 / 2 / 3 / 4 / 5

Row Column

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout.

Preview
HTML

Five

Seven

Nine

														
<!-- Column-5 -->
<div class="container">
<div class="row row-cols-xl-5">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>

<!-- Column-7 -->
<div class="row row-cols-xl-7">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>

<!-- Column-9 -->
<div class="row row-cols-xl-9">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>
</div>