Advanced Search

Bootstrap All Screen Align

/ Published in: SASS
Save to your folder(s)
This is a simple SASS script that producing CSS classes for text alignment in different screen sizes primarily for bootstrap but of course can be used in other scripts as well.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2. *   The following code is responsible to product text
  3. *   align classes for different screen sizes.
  4. ------------------------------------------------------------------*/
  5. $screens : 768, 970, 1024;
  6. $sizes : sm, md, lg;
  7. $aligns : left, right, center, justify;
  8. $count : 0;
  9.  
  10. @each $screen in $screens {
  11.     $count : $count + 1;
  12.     @media (min-width: #{$screen}px)
  13.     {
  14.         $size : nth($sizes, $count);
  15.  
  16.         @each $align in $aligns {
  17.             .text-#{$size}-#{$align} {
  18.                 text-align : #{$align} !important;
  19.             }
  20.         }
  21.     }
  22. }

URL: https://github.com/merianos/bootstrap-all-screen-align

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.