Possible CSS Enhancement

[jayden-arrai]

You can use this as an enhancement if you would like.

I had 4 images which needed to display as follows:

Medium + displayed on 1 row:

Image One	Image Two	Image Three	Image Four
Left Aligned	Centered	Centered	Right Aligned

Small displayed on 2 rows:

Image One / Three	Image Two / Four
Right Aligned	Left Aligned
Right Aligned	Left Aligned

Extra Small displayed on 4 rows:

Image One - Four
Centered
Centered
Centered
Centered

So I created the following css to allow me to do that:

.text-left-xs {
  text-align: left;
}

.text-right-xs {
  text-align: right;
}

.text-center-xs {
  text-align: center;
}

@media (min-width: 768px) {
  .text-left-sm {
    text-align: left;
  }

  .text-right-sm {
    text-align: right;
  }

  .text-center-sm {
    text-align: center;
  }
}

@media (min-width: 992px) {
  .text-left-md {
    text-align: left;
  }

  .text-right-md {
    text-align: right;
  }

  .text-center-md {
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .text-left-lg {
    text-align: left;
  }

  .text-right-lg {
    text-align: right;
  }

  .text-center-lg {
    text-align: center;
  }
}

The html to do what I want is:

<div class="col-md-3 col-sm-6 col-xs-12 text-left-md text-right-sm text-center-xs">
  <img />
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center-md text-left-sm text-center-xs">
    <img />
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center-md text-right-sm text-center-xs">
  <img  />
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-right-md text-left-sm text-center-xs">
  <img />
</div>

[cvrebert]

Seems somewhat niche.
FWIW, we'll probably add some mixins to make defining these sorts of classes easier; see #13014.

[mdo]

Closing as a dupe of #11292.