1.

container // class with length 1150

container-fluid

1.1. row
1.2. row-col-<no of columns you want in an array>
1.1.1 col
<div class=”w-100”></div>// for breaking columns
1.1.1 col-xl
col-lg
col-md
col-sm

Grid System in Bootstrap:

There are fixed 12 columns. So we make column size using .col-<1-12>
col-xl-<1-12>
col-lg-<1-12>
col-md-<1-12>
col-sm-<1-12>

Offset Classes:
offset-<1-11>
Responsively:
offset-xl-<1-11>
offset-lg--<1-11>
offset-md-<1-11>
offset-sm-<1-11>

BootStrap Ordering:
.order-first
.order-xl-first
.order-xl-last

.order-last

.order-<sequence no>
.order-xl-<sequence no>

Margin classes:
.m-auto
.ml-auto
.mr-auto
.m-xl-auto
 .m-<0-5>
0=0px
1= .25rem
2= 0.5rem
3 = 1 rem
4 = 1.5rem
5 = 2 rem

.mr-<0-5>
.ml-<0-5>
.mt-<0-5>
.mb-<0-5>
.m-xl-<0-5>
.mx<0-5>
.my-<0-5>
.no-gutters// it zeros the default margin and padding
We can also use negative margin by writing n before margin size

Padding:
.p-<0-5> same as above
.py-<0-5>
.px<0-5>

Horizontal Alignment:
justify-content-start ;moves columns to the left
justify-content-center; moves columns in the center
justify-content-end; moves columns in the end
justify-content-between; add equal spaces in the columns
justify-content-around; add equal spaces around the columns

justify-content-xl-around

Vertical Alignment:

align-items-start
align-items-end
align-items-center

align-items-stretch; it sets the height of the column to the default value

align-items-baseline; align items by matching the base lines of the columns

align-items-xl-baseline

align-self-lg-center
Flex Row Direction:
flex-row-reverse
flex-row
flex-column
flex-column-reverse
flex-wrap
flex-nowrap
Flex-wrap-reverse
flex-fill
flex-xl-row-reverse

Display:
d-none
d-flex
d-print-block
Float:
float-left
float-right
clearfix
float-xl-left
float-none
Width:
w-<percentage>
w-auto
mw-100 //max width
mh-100
vh-100
vw-100
min-vh-100
min-vw-100
.no-gutters
Position:
fixed-top
fixed-bottom
sticky-top
overflow-auto
overflow-hidden

Text:
.text-justify
.text-sm-left
.text-sm-right
 .text-lowercase
.text-uppercase
.text-capitalize
.font-weight-lighter
.font-weight-bolder, bold, light, normal
.font-italic

.text-reset
display-<1-4> font size decreases with increase in no
.lead

List:
list-unstyled
.list-inline
.list-inline-item

.blockquote
.blockquote-footer
.user-select-auto; //it allows user to select the paragraph
.user-select-all
.user-select-none

Button:
btn-link
.btn-primary
.btn-outline-primary
.btn-block
.btn-lg
.active
.disabled
.btn-group
.btn-group-lg
.btn-toolbar
.btn-group-vertical
Font awesome is used for icons
.dropdown-toggle
data-toggle=”dropdown”
.dropdown-menu
.dropdown-item

List:
.list-group
.list-group-flush
 .list-group-item
.list-group-item-primary
.list-group-horizontal-{sm-lg-xl-md}

Table:
.table
.table-dark
.table-borderless

.table-stripped; assigns alternative colors to alternative rows

.thead-dark
.thead-light
.table-bordered
.table-sm
.table-responsive-{xl||md||sm||lg}
.border-primary
Tr tag classes:
.table-primary etc
.bg-primary
.align-top
.align-middle
.align-bottom

Pagination:
<nav>
<ul class = “pagination>
<li class = page-item><input href=”” class = “pagelink”</i>
active disabled
pagination-lg
<ul>
<nav/>

bread-crumb
.breadcrum-item

Gutter:
.g-[0-5] gap will increase with increase in value
.gx-[0-5]
.gy-[0-5]
.g-xxl-[0-5]

Line height:
.lh-1
 .lh-sm
.lh-lg
.lh-base

Form classes:
.form-group
.form-control ; input class
.form-text
text-muted
.form-controll-mutable
.form-control-lg
.form-control-file
.form-control-range
.form-check
.form-check-input
.form-check-label
.form-check-label-lg

.form-inline
.sr-only(screen only)

Custom classes:
.custom-select
.custom-select-lg
custom-file
.custom-control
.custom-checkbox
.custom-radio
.custom-switch

.is-valid
.is-invalid
.valid-feedback

Input Group classes:

.input-group-prepend
..input-group-text
.input-group-append

.dropdown-toggle
.dropdown-toggle-split
data-toggle=dropdown
.dropdown-menu
.dropdown-item
Navigation:
.nav
.nav-item
.nav-link
.nav-pills
.nav-justify

.navbar
.navbar-light
.navbar-dark
.navbar-brand
.navbar-nav

.navbar-expand-lg