For now we are using 4 breakpoints for 4 different type of screen, it's the default breakpoints of bootstrap framework. Bootstrap framework is mobile-first based, therefore we will not violate this concept.

  • Extra small devices - Phones (<768px)
  • Small devices - Tablets (≥768px)
  • Medium devices - Desktops (≥992px)
  • Large devices - Desktops (≥1200px)


In LESS files we can use this breakpoints as variables together with media-queries.

  • Extra small devices -> @screen-xs
  • Small devices -> @screen-sm-min
  • Medium devices -> @screen-md-min
  • Large devices -> @screen-lg-min

We should define all common styles for any element for without any breakpoint (by default it's will be applied for all screen) and we must use media-queries for override or add custom properties to selector.

For example, our-block.less:

/* it will be applied for all screen sizes, it will be block 100% width and 100% height parent block and have red background */ .our-block { display: block; width: 100%; height: 100%; background-color: red; } /* it will be applied to all screen starting from small devices where screen width ≥ 768px */ @media (min-width: @screen-sm-min) { .our-block { width: 150px; height: 150px; } } /* if we want to set property only for one breakpoint we should set up min-width and max-width */ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .our-block { width: 200px; height: 200px; } } /* in result we will have 200x200 only on screens where width ≥ 768 < 992 for rest (medium, large) we have previous values (150x150) */