Class PPT

Agenda

• Media-Queries
• Bootstrap
• Breakpoints
• Layout
• Grid
• Components
• JavaScript

Bootstrap

• It is the CSS Framework for developing responsive and mobile-first websites.
• Bootstrap 5 is the newest version of Bootstrap

Bootstrap Breakpoints

• Breakpoints are customizable widths that determine how your responsive layout behaves across device.
• They are the building blocks of responsive design.
• Use media queries to architect your CSS by breakpoint.
• Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters.
• We most commonly use min-width in our media queries.

Available breakpoints

• Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
  1. Extra Small (None) - <576px (For mobile no prefix)
  2. Small(sm) - ≥576px
  3. Medium(md) - ≥768px
  4. Large(lg) - ≥992px
  5. Extra large(xl) - ≥1200px
  6. Extra extra large(xxl) - ≥1400px