Skip to content

README.md

Latest commit

 

History

History
40 lines (29 loc) · 923 Bytes

README.md

File metadata and controls

40 lines (29 loc) · 923 Bytes

Responsive-Breakpoints

Library to bring bootstrap screen sizes xs sm md lg xl to your html elements class.

Problem

I need some padding to a specific element when bootstrap screen size is md

Solutions

  1. Use media query. But that means replicating pixels
  2. Use mixins. But that means recompiling bootstrap css
  3. Use Responsive-Breakpoints

Usage

<script src="responsive-breakpoints.js"></script>
<div class="responsive-breakpoints"></div>

This div will now automagically get bootstrap screensizes as classes:

<div class="responsive-breakpoints xs"></div>
<div class="responsive-breakpoints sm"></div>
<div class="responsive-breakpoints md"></div>
<div class="responsive-breakpoints lg"></div>
<div class="responsive-breakpoints xl"></div>

You can now style this element specifically:

div.md {
 padding-top: 4px;
}

Live example

https://codepen.io/HerasHackwork/pen/rGGNEK