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
-
To make fixed elements to the bottom of page add the classes
position-fixed bottom-0
-
To make fixed elements to the right or left of page add the
classes left-0 right-0
-
To make fixed elements (sticky) inside a dev
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
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
by Kim Majali,
EITO team, and contributors.