Cheat Sheet bootstrap-5-3-2023

A cheat sheet of bootstrap

Academic year: 2024/2025

Uploaded by:

Anonymous Student

This document has been uploaded by a student, just like you, who decided to remain anonymous.

University of the Free State

Comments

Please sign in or register to post comments.

Preview text

Bootstrap 5 (2023) Cheat Sheet

by LiezelN via cheatography/69317/cs/17476/

Alert messages Alert messages alert alert-* (primary, secondary, success, info, warning, dark, light, link) alert-dismissible alert-link btn-close Breadcrumbs Breadcrumbs breadcrumb breadcrumb-item active Buttons Buttons btn btn-* (primary, secondary, success, info, warning, dark, light, link) btn-outline-* (primary, secondary, success, info, warning, danger, dark, light) Button Modifiers Button Modifiers btn-lg btn-sm btn-group btn-toolbar btn-group-* (lg, sm) btn-group-vertical d-grid Cards Cards card card-img-top card-body card-title card-subtitle card-text card-link Carousel Carousel carousel slide carousel-fade carousel-inner carousel-item carousel-item active carousel-caption carousel-control-prev carousel-control-prev-icon carousel-control-next carousel-control-next-icon carousel-indicators Colour/Context Colour/Context text-* (primary, secondary, success, danger, warning, info, light, dark, body, muted, white) bg-* OR text-bg-* (primary, secondary, success, danger, warning, info, light, dark, white, transparent) border OR border-* (top, end, bottom, start) border-* (primary, secondary, success, danger, warning, info, light, dark, white) Display/Position Display/Position float-start float-end d-block d-inline d-none Dropdowns Dropdowns dropdown dropdown-toggle dropdown-menu dropdown-item dropdown-item disabled dropdown-header dropdown-divider dropup Forms Forms form-label form-control form-check form-check-label form-check-input form-control-sm form-control-lg form-select col-form-label Grid Grid container container-fluid row col col-# (< 576px) col-sm-# (>= 576px) col-md-# (>= 768px) col-lg-# (>= 992px) col-xl-# (>= 1200px) col-xxl-# (>= 1400px Images Images img-fluid rounded rounded-* (top, end, bottom, start, circle) img-thumbnail List groups List groups list-group list-group-numbered list-group-item active disabled Navs Navs nav nav-item nav-link nav-link active nav-link disabled nav-pills nav-tabs Nav alignment Nav alignment nav-fill justify-content-center justify-content-end flex-column Navbar Navbar navbar navbar-expand-* (sm, md, lg, xl,xxl) navbar-nav navbar-brand navbar-text collapse navbar-collapse navbar-toggler navbar-toggler-icon fixed-top fixed-bottom By LiezelNLiezelN cheatography/liezeln/ Published 16th October, 2018. Last updated 2nd October, 2023. Page 1 of 2. Sponsored by CrosswordCheats.comCrosswordCheats Learn to solve cryptic crosswords! crosswordcheats

Bootstrap 5.3 (2023) Cheat Sheet

by LiezelN via cheatography.com/69317/cs/17476/

Alert messagesAlert messages

alert

alert-* (primary, secondary,

success, info, warning, dark,

light, link)

alert-dismissible

alert-link

btn-close

BreadcrumbsBreadcrumbs

breadcrumb

breadcrumb-item

active

ButtonsButtons

btn

btn-*

(primary, secondary, success,

info, warning, dark, light, link)

btn-outline-*

(primary, secondary, success,

info, warning, danger, dark, light)

Button ModifiersButton Modifiers

btn-lg

btn-sm

btn-group

btn-toolbar

btn-group-* (lg, sm)

btn-group-vertical

d-grid

CardsCards

card

card-img-top

card-body

card-title

card-subtitle

card-text

card-link

CarouselCarousel

carousel

slide

carousel-fade

carousel-inner

carousel-item

carousel-item active

carousel-caption

carousel-control-prev

carousel-control-prev-icon

carousel-control-next

carousel-control-next-icon

carousel-indicators

Colour/ContextColour/Context

text-*

(primary, secondary, success,

danger, warning, info, light, dark,

body, muted, white)

bg-* OR text-bg-*

(primary, secondary, success,

danger, warning, info, light, dark,

white, transparent)

border OR

border-* (top, end, bottom, start)

border-*

(primary, secondary, success,

danger, warning, info, light, dark,

white)

Display/PositionDisplay/Position

float-start

float-end

d-block

d-inline

d-none

DropdownsDropdowns

dropdown

dropdown-toggle

dropdown-menu

dropdown-item

dropdown-item disabled

dropdown-header

dropdown-divider

dropup

FormsForms

form-label

form-control

form-check

form-check-label

form-check-input

form-control-sm

form-control-lg

form-select

col-form-label

GridGrid

container

container-fluid

row

col

col-# (< 576px)

col-sm-# (>= 576px)

col-md-# (>= 768px)

col-lg-# (>= 992px)

col-xl-# (>= 1200px)

col-xxl-# (>= 1400px

ImagesImages

img-fluid

rounded

rounded-* (top, end, bottom,

start, circle)

img-thumbnail

List groupsList groups

list-group

list-group-numbered

list-group-item

active

disabled

NavsNavs

nav

nav-item

nav-link

nav-link active

nav-link disabled

nav-pills

nav-tabs

Nav alignmentNav alignment

nav-fill

justify-content-center

justify-content-end

flex-column

NavbarNavbar

navbar

navbar-expand-*

(sm, md, lg, xl,xxl)

navbar-nav

navbar-brand

navbar-text

collapse

navbar-collapse

navbar-toggler

navbar-toggler-icon

fixed-top

fixed-bottom

By LiezelNLiezelN

cheatography.com/liezeln/

Published 16th October, 2018.

Last updated 2nd October, 2023.

Page 1 of 2.

Sponsored by CrosswordCheats.comCrosswordCheats.com

Learn to solve cryptic crosswords!

http://crosswordcheats.com

Internet Programming (CSIS3734)

University of the Free State

Comments

Students also viewed

Related documents

Preview text

Bootstrap 5 (2023) Cheat Sheet

by LiezelN via cheatography/69317/cs/17476/