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) { ... }

Discover More
Cross-Browser Testing tool

All cross-browser testing tool are web driver based. See the webdriver for more information. You can also open multiple browsers (desktop, mobile for responsive design) and see your change live thanks...
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