Welcome To Bootstrap 5

---

LAYOUT

---

GRID:

---

---

COLUMNS WITH GRID:

---

---

Align-items-start

---

---

Align-self-start / align-self-center / align-self-end

---

---

NO WARP GRID:

---

---

COLUMN WITH REORDERING:

---

---

COLUMN WITH OFFSET:

---

---

FLEX:

---

---

flex-row

---

---

flex-reverse

---

---

flex-column

---

---

flex-column-reverse

---

---

FLEX WITH JUSTIFY CONTENT:

---

---

justify-content-start

---

---

justify-content-center

---

---

justify-content-end

---

---

justify-content-between

---

---

justify-content-around

---

---

FLEX WITH ALIGN ITEMS:

---

---

align-items-start

---

---

align-items-end

---

---

align-items-center

---

---

align-self-start / align-self-center / align-self-end

---

---

FLEX WITH ORDERED:

---

---

COLUMN WITH GUTTERS:

---

---

CONTENT

---

TYPOGRAPHY:

---

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

---

Lead:

---

Normal:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lead:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

blockquote:

---

A well-known quote, contained in a blockquote element.

---

IMAGES:

---

---

TABLES:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH BACKGROUND:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH STRIPED:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH HOVER:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH BORDERED:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH BORDEREDLESS:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH SIZE:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

TABLES WITH COLOR:

---

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter	@yahoo

---

FORMS

---

FORM CONTROL:

---

---

FORM WITH SIZING:

---

---

FORM WITH FIILE:

---

---

FORM WITH SELECT:

---

Open this select menu One Two Three

---

FORM WITH CHECKBOX:

---

---

FORM WITH RADIO BUTTON:

---

---

FORM WITH SWITCH:

---

---

FORM WITH INPUT GROUP:

---

Your vanity URL

---

FORM WITH FLOATING LABELS:

---

---

FORM AND LAYOUT:

---

---

FORM WITH VALIDATION:

---

First name

Last name

Username

@

City

State Choose... ... ...

Zip

Agree to terms and conditions

Submit form

Textarea

Please enter a message in the textarea.

Check this checkbox

Example invalid feedback text

Toggle this radio

Or toggle this other radio

More example invalid feedback text

Open this select menu One Two Three

Example invalid select feedback

Example invalid form file feedback

---

RANGE:

---

Example range Example range

---

UTILITIES

---

BACKGROUND COLOR:

---

---

BORDERS:

---

---

TEXT COLOR:

---

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-dark

.text-body

.text-muted

.text-black-50

.text-light

---

DISPLAY:

---

d-block d-block

---

FLOAT:

---

---

INTERACTION:

---

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

---

OVERFLOW:

---

---

POSITION:

---

---

SHADOW:

---

---

SIZING:

---

---

SPACING:

---

---

TEXT ALIGN:

---

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

---

FONT SIZE:

---

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

---

FONT STYLE:

---

Bold text.

Normal weight text.

Light weight text.

Italic text.

Text with normal font style

---

LINE HEIGHT:

---

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

---

MONOSPACE:

---

This is in monospace

---

TEXT DECORATION:

---

This text has a line underneath it.

This text has a line going through it.

---

VERTICAL ALIGNMENT:

---

baseline

top

middle

bottom

text-top

text-bottom

---

VISIBILITY:

---

---

---

CLEARFIX:

---

---

LINK WITH COLOR:

---

Primary link Secondary link Success link Danger link Warning link Info link Dark link Light link

---

RATIO:

---

---

POSITION:

---

Fixed Top:
Fixed Bottom:
Sticky Top:

---

VISUALLY HIDDEN:

---

Title for screen readers

---

ADD LINK:

---

---

TEXT TRUNCATE:

---

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

---

ACCORDION:

---

---

ALERTS:

---

---

BADGE:

---

Notifications 4

Example heading New

Example heading New

---

BREADCRUMB:

---

1. Home

1. Home
2. Library

1. Home
2. Library
3. Data

---

BUTTON:

---

Primary Secondary Success Danger Warning Info Dark Light

---

BUTTON WITH OUTLINE:

---

Primary Secondary Success Danger Warning Info Dark Light

---

BUTTON WITH SIZE:

---

Large button Large button

Small button Small button

---

BLOCK LEVEL BUTTON:

---

---

BUTTON GROUP:

---

---

BUTTON TOOLBAR:

---

---

BUTTON WITH TOGGLE:

---

---

CARD:

---

---

CARD WITH NAV:

---

---

CAROUSEL:

---

---

CLOSE BUTTON:

---

---

COLLAPSE:

---

Link with href Button with data-bs-target

---

DROPDOWN:

---

---

LIST GROUP:

---

• An item
• A second item
• A third item
• A fourth item
• And a fifth one

• An active item
• A second item
• A third item
• A fourth item
• And a fifth one

---

LIST GROUP WITH HOVER:

---

---

LIST GROUP WITH FLUSH:

---

• An item
• A second item
• A third item
• A fourth item
• And a fifth one

---

LIST GROUP WITH COLOR:

---

• A simple primary list group item
• A simple secondary list group item
• A simple success list group item
• A simple danger list group item
• A simple warning list group item
• A simple info list group item
• A simple light list group item
• A simple dark list group item

---

LIST GROUP WITH BADGE:

---

• A list item 14
• A second list item 2
• A third list item 1

---

LIST GROUP WITH CUSTOM CONTENT:

---

---

MODAL:

---

Launch demo modal

---

NAVS AND TABS:

---

• Active
• Much longer nav link
• Link
• Disabled

---

NAVBAR:

---

---

OFFCANVAS:

---

Toggle top offcanvas Toggle bottom offcanvas Toggle left offcanvas Toggle right offcanvas

---

PAGINATION:

---

• Previous
• 1
• 2
• 3
• Next

• Previous
• 1
• 2
• 3
• Next

---

POPOVERS:

---

Click to toggle popover

Popover on top Popover on right Popover on bottom Popover on left

---

POPOVER WITH TRIGGER:

---

Dismissible popover

---

PROGRESS:

---

---

MULTIPLE PROGRESS BAR:

---

---

STRIPED PROGRESS BAR:

---

---

ANIMATED STRIPED BAR:

---

---

SPINNERS:

---

Loading... Loading...

---

TOOLTIP:

---

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

---