Positions Classes
Add these classes to change div position
position-static, position-fixed, position-absolute,
position-relative, position-sticky
What are CSS
Positions?
-
To make fixed elements to the top of page add the classes
position-fixed top-0, top-1, top-2, top-3, top-4
-
To make fixed elements to the bottom of page add the classes
position-fixed bottom-0, bottom-1, bottom-2, bottom-3, bottom-4
-
To make fixed elements to the right of page add the
classes position-fixed right-0, right-1, right-2, right-3, right-4
-
To make fixed elements to the left of page add the
classes position-fixed left-0, left-1, left-2, left-3, left-4
- For relative location to the parent element use the class top-25, top-50, top-75, right-25, right-50, right-75
- For relative location to the viewport use the class top-25-vh, top-50-vh, top-75-vh, right-25-vw, right-50-vw, right-75-vw
-
To make fixed elements (sticky) inside a div
position-sticky
Display Classes
Add these classes to change div Display
d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex,
d-inline-flex
What are CSS display
types?
Mobile or Desktop Only Classes
Sometimes we want to show an element only on mobile devices or on desktop devices but not on both, add the classes
mobile-only or desktop-only
Float and Clear Classes
- To apply or remove float add the classes float-right float-left float-none
- You can also clear float using the classes clear-both clear-right clear-left
- You can fix float using the class clear-fix If the floated element is taller than the element
containing it
Overflow & Scroll Classes
- To apply overflow on both sides add the classes overflow-hidden, overflow-visible,
- To apply overflow on the x-axis using the classes overflow-x-auto, overflow-x-scroll, overflow-x-hidden
- To apply overflow on the y-axis using the classes overflow-y-auto, overflow-y-scroll, overflow-y-hidden
- You can style the scroll using the class scrollbar-none, scrollbar-thin
Z-index Classes
Add these classes to change the z-index of an element, use the classes: z--1, z-0, z-1, z-2, z-3, z-10, z-100
Flex Classes
Add these classes to change flex div behaviour
d-none, d-inline, d-inline-block, d-block, d-table, d-table-row, d-table-cell, d-flex,
d-inline-flex
What are CSS display
types?
-
Container Behaviour add these classes flex-row, flex-column, flex-row-reverse, flex-column-revers,
flex-wrap, flex-nowrap,
flex-wrap-reverse, flex-fill
-
Justify contents horizantally add these classes justify-content-start, justify-content-end,
justify-content-center, justify-content-between,
justify-content-around
-
Align items vertically (horizantally if flex-colomn) add these classes align-items-start,
align-items-end, align-items-center,
align-items-baseline, align-items-stretch, align-items-stretch
-
Align content vertically (of item) add these classes align-content-start, align-content-end,
align-content-center,
align-content-between, align-content-around, align-content-stretch
-
Align self vertically (of item) add these classes align-self-auto, align-self-start,
align-self-end,
align-self-center, align-self-baseline, align-self-stretch
