CSS - Responsive (Breakpoint)

1 - About

3 - Responsive Element

An element that defined the width:

  • or fix with a max-width property in percentage generally equal or below 100%


percent {
    width: 100%;

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

4 - Breakpoint

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

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap