CSS - Responsive (Breakpoint)


responsiveness in CSS

Responsive Element

An element that defined the width:


percent {
    width: 100%;

fix_res {
   width: 350px;
   max-width: 100%


Bootstrap use media queries to create breakpoints. They are called also toggle size for the navbar.


Code Name Description Size
xs extra small Bootstrap Default <576px
sm small Small devices (landscape phones) < 768px
md medium tablets <992px
lg large Desktop <1200px
xl extra-large large desktops >= 1200px
/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) { ... }

/* .... */
  • In the other direction (the given screen size or smaller):
@media (max-width: 575px) { ... }
  • targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
@media (min-width: 576px) and (max-width: 767px) { ... }
  • span multiple breakpoint widths
@media (min-width: 768px) and (max-width: 1199px) { ... }

Recommended Pages
Android Screen Buckets
UI Responsive Design - Breakpoint

layouts are responsive (ie change) at what is called breakpoint. Use line measures as a factor for picking breakpoint. where: viewport example (ie the size of the display device) Ipad: 768...

Share this page:
Follow us:
Task Runner