Positions and Displays

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 horizantaly add these classes justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
  • Align items verticaly (horizantaly 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 verticaly (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 verticaly (of item) add these classes align-self-auto, align-self-start, align-self-end, align-self-center, align-self-baseline, align-self-stretch
← Previous Next →

Designed and built with love in Europe by Europe IT Outsourcing Company Developers.