.

container == fixed width container

.container-fluid == full width container
.pt-5 == large top padding
.container-sm|md|lg|xl|xxl == change max-width of container on different screen
sizes
.col- == creates equal width columns
.col-sm-4 == creates 4 column with small width
.bg-dark == creates black background
.text-white == makes text color white
.bg-primary == makes blue bg
.h1 -- .h6 == makes bolder font-weight and a responsive font sizes
.mt-3 == margin top 3
.display-1 -- .display-6 == larger font size lighter font weight
.small(<small></small>) == to create secondary text
.mark(<mark></mark>) == yellow backgroud color and padding for text
<abbr> == dotted underline and cursor with question mark
eg <p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
.blockquote(<blockquote></blockquote>) == used for quoting
<dl> == description list
<dt> == discription top (bold)
<dd> == discription
<code> == embedding snippets of code
<kbd> == keyboard input
<pre> == for multiple lines of code

.lead == makes para stand out

.text-start = left aligned text
.text-break == makes long text responsive
.text-center == center aligned text
.text-decoration-none == removes underline
.text-end == right aligned text
.text-nowrap == no wrap text
.text-lowercase == indicates lowercase text
.text-uppercase == indicates uppercase text
.text-capitalize == indicates capitalized text
.initialism == font of text in <abbr> becomes slightly smaller
.list-unstyled == removes list style and left margin(does not apply to nested list
use on nested ul also)
.list-inline == all list items in single line(use with .list-inline-item on every
child li)

COLORS AND BG

.text-muted == silent grey

.text-primary == light blue
.text-success == green
.text-info == skyblue
.text-warning == yellow
.text-danger == red
.text-secondary == grey
.text-dark == dark grey
.text-body == black
.text-white == white

to add opacity to text

.text-black-50 == 50% opacity for black
for bg
.bg-COLORNAME where COLORNAME is same as above

TABLEs

.table == basic styling to table (light padding and horizontal dividers)

.table-striped == adds zebra stripes to table(alternate coloring for row)
.bordered-table == borders on all side of table and cells
can.table-hover == hover effect to table
.table-dark == black backgroud to table
.table-dark and .table-stripped combined produced good table
.table-borderless == borderless table
.table-COLORNAME can be used on table rows or table data to produce different
colored table
.table-sm == makes table smaller by cutting padding in half
.table-responsive == adds scollbar to table (can be used with -sm|md|lg|xl|xxl)

IMAGES

.rounded == rounds the corner

.rounded-circle == images as circle
.img-thumbnail == makes image as thumnail
.mx-auto .d-block == centered image
.img-fluid == max-width 100% height auto

JUMBOTRON (not supported in BS5 but achieved with following)

.mt-4 p-5 .bg-primary .text-white .rounded

AlERTS
.alert ==

BUTTONS
button classes can be used on <a>,<button>,<input>
.btn-lg|sm === defines button size
.btn-block === block level BUTTONS
.btn-group-sm|lg === to create button group
.btn-group-vertical == to align button group vertically

nest button groups to create dropdown menus

use class dropdown-toggle on button which contains child buttons

if u have a div with multiple block level buttons use

.d-grid .gap-3 on div to control space between the buttons in that div
.active === makes button pressed
.disabled ==== makes button unclickable
<a> does not support disabled

spinner buttons

.spinner-border == to create spinner/loader

.spinner-grow == spinner grow instead spinner
.spinner-border-sm|lg == to adjust size of spinner
use spinner-border class in span element inside button to create loading button
<button class="btn btn-dark">
<span class= "spinner-border spinner-border-sm"></span>
Loading...
</button>

BADGES
use badges on span
.badge === to create badge (badge scale to match the size of the parent element)
used with .rounded-pill for round corners

eg of badge inside button

<button type="button" class="btn btn-primary">
Messages <span class="badge bg-danger">4</span>
</button>

PROGRESS BAR
use on div inside div
use width style on child element
.progress == to crete container for progress BAR
.progress-bar == added on child element of progress class
.progress-bar-striped == add stripes to progress bar
.progress-bar-animated == animate progress bar

PAGINATION

.pagination == to ul (basic pagination)

.page-item == to li (page sequence )
.page-link == to a (For links)
.active == highlight current page
.disabled = unclickable links
.pagination-lg|sm == to adjust size
.pagination justify-content-center == align pagination to center

breadcrumb is another format for pagination

eg Photos / Videos / Files / Apps
.breadcrumb == on ul
.breadcrumb-item == on li

LIST GROUPS

.list-group == to ul (basic list group)

.list-group-item == to li (to create list items)
.active === to highlight current item
.list-group-item-action == highlight with grey color on hover
.list-group-flush == to remove some borders and corners
.list-group-numbered == list with numbers
.list-group-horizontal == on ul
.list-group-item-COLORNAME == list items with different colors

list group with badges

eg Inbox 12
Ads 50
Junk 99
 use following classes on li
.list-group-item .d-flex .justify-content-between align-items-center

CARDS

.card == on parent div

.card-body == on child div
.card-header == adds header to class
.card-footer == class adds footer to card
.card-title == titles for card
.card-text == writing description for CARDS
.card-link == to add links in class (use for <a>)
.card-img-top|bottom == to add image at top or bottom of card
when .card-img is added inside the card-body it span over entire body
.card-img-overlay == add text on top of imgage
content in .card-img-overlay class will be shown at top of image

DROPDOWN MENUS

.dropdown == use on parent div (creates dropdown menu)

.dropdown-toggle == used on button (creates toggle button )
.dropdown-menu == used on ul (creates the actual dropdown menu)

.dropdown-divider == used to separate links inside the dropdown menu with horizotal
border
eg <li><hr class="dropdown-divider"></hr></li>

.dropdown-header == to add header inside dropdown menus

eg <li><h5 class="dropdown-header">Dropdown header 1</h5></li>

.dropend == dropdown at right

.dropstart == dropdown at left
.dropup == dropdown up
.dropdown-item-text == to add plain text to dropdown menu

COLLAPSIBLE

.collapse == added on element that is going to collapse

use attribute

data-bs-toggle= "colapse" on element which should cause collapse

accordion === when multiple cards are contained in one div

out of mutiple cards only one card is expanded at a time

NAVBARS

.nav == to ul (creates nav)

.nav-item == to li
.nav-link == to <a>
.nav justify-content-center == centers nav bar
.nav flex-column == create a vertical nav
.nav-tabs == to ul (creates tab navbar)
.nav-pills == to ul (creates pills)
to create a nav-item with dropdown
use dropdown class on that li element and add dropdown-toggle button
inside button add dropdown-menu ul with dropdown-item

add attribute data-bs-toggle = "tab" to nav-tabs(ul) child elements

make separate div with tab-content which contains different div with tab-pane class

.navbar-expand-xxl|xl|lg|md|sm == makes navbar vertical on different size screens

.navbar-brand == for mentioning brand logo or name with link in navbar

.navbar-links == for adding text to navbar which is not text

to create a collapsable navbar use button with class .navbar-toggler with attribute
data-bs-toggle="collapse" data-bs-target = "#collapsibleNavbar"

.fixed-top == makes navbar fixed at top

.fixed-botton == makes navbar fixed at bottom
.sticky-top == makes navbar sticky at top

CAROUSEL/SLIDESHOW

.carousel == creates carousel

.carousel-indicators == adds indicators for carousel
.carousel-inner == adds slides to carousel
.carousel-item == content of slides

USED WITH JS

MODAL
styled alert

Tooltips
small pop-up when user hovers over a element
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip"
title="Hooray!">Hover over me!</button>

POPOVERS
similar to tooltips but contains more content

TOAST
notification

SCROLLSPY
automatically update links in a navigation bar based on scroll
add following to body tag
data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"

OFFCANVAS
side navigation bar
UTILITY CLASSES
.border === adds border
.border-top
.border-bottom
.border-end
.border-start
.border-1 == border width
.border-primary == color
.rounded == round border
.rounded-5 == more rounded border
.float-start == float left
.float-end

.float-sm|md|lg|xl|xxl|none-end == float right on

.mx-auto == center element

.w-25|50|75|100 == width
.mw-auto == max-width auto

.h-25|50|75|100 == height
.mh-100|auto

spacing marginbottom mb ,marginend me ...

.shadow-small|lg|none

aligning vertically
.align-baseline == aligns at bottom
.align-top == aligns at top
.align-middle ==
.align-bottom
.align-text-top
.align-text-bottom

.visible
.invisible

.btn-close == cross button

FLEXBOX

.d-flex == to create flex container

.d-inline-flex == create inline flex container
.flex-row == flex items horizontal
.flex-row-reverse == flex items horizontal but reverse order
.flex-column
.flex-column-reverse
.justify-content-start
.justify-content- end
.justify-content-between
.justify-content-around
.flex-fill == items into equal width
.flex-grow-1 == use on flex item to take up the rest of space
.flex-shrink-1 == makes item shrink
.ms-auto == pushes items right
.me-auto == pushes items left
.flex-nowrap == default no wrapping of flex items
.flex-wrap ==
.flex-wrap-reverse

used on container
.align-content-start == vertically top
.align-content-end == vertically bottom
.align-content-center == center
.align-content-around == space around
.align-content-strech == items are filled in containier

used on container for single rows

.align-items-start ==
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

used on flex-item
.align-self-start ==
.align-self-end ==
.align-self-center ==
.align-self-baseline ==
.align-self-stretch ==

data-mdb-container == for smooth scroll on container

data-mdb-smooth-scroll == on links