Bootstrap: Change color text in responsive mode.

Created on 30 Oct 2018  Â·  6Comments  Â·  Source: twbs/bootstrap

Implement this code in directory "utilities/_text.scss".

 @each $breakpoint in map-keys($grid-breakpoints) 
 {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
    .text#{$infix}-white { color: $white !important; }

    @each $color, $value in $theme-colors 
           {
      @include text-emphasis-variant(".text#{$infix}-#{$color}", $value);
    }
      }
 }
  • Create textual and / or dimanic designs in any screen size.
css v4

Most helpful comment

I'm a pass on adding responsive text color. Thanks though!

All 6 comments

/CC @MartijnCuppens

We've got to limit the generation of utility classes somewhere. I don't know if it's worth adding these classes by default. IMO we should not add this in v4, but for v5 we can look if we can make it easy to enable or disable the generation of classes like these.

We need to consider the CSS size for sure. If we keep adding stuff, the CSS will get huge. It's a balance we need to keep.

/CC @mdo for the final choice.

Thanks for you response!
Bootstrap is genial!!!

El 30/10/2018 7:01, "XhmikosR" <[email protected]notifications@github.com> escribió:

We need to consider the CSS size for sure. If we keep adding stuff, the CSS will get huge. It's a balance we need to keep.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/twbs/bootstrap/issues/27545#issuecomment-434288446, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AqhoRAaiYtULKyKn240PmgxSHNPQvfO_ks5uqE2SgaJpZM4YA6G-.

Maybe for v5 utilities can have a utilities.css just like responsive behavior was in v2 or v3 (can't remember which one)

I'm a pass on adding responsive text color. Thanks though!

Was this page helpful?
0 / 5 - 0 ratings