Table of Contents

About

responsiveness in CSS

Responsive Element

An element that defined the width:

Example: 

percent {
    width: 100%;
}

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

Breakpoint

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

List:

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