8

How can I justify content of a column for different breakpoints. For example, I want the following email text to be justified to the end for > medium columns but justified to the centre for smaller columns. Looking for an elegant solution.

<div class="row">
            <div class="col-md-4">
              Email
            </div>
</div>
D.B
  • 4,009
  • 14
  • 46
  • 83
  • What have you tried so far? Have you [read the docs](https://getbootstrap.com/docs/4.0/utilities/text/)? Do you mean aligning text within the column, or the column within the row? – Carol Skelly Apr 15 '18 at 09:58

1 Answers1

23

To position the content of the column div you can use the responsive versions of justify-content-* class with d-flex

<div class="row">
    <div class="col-md-4 d-flex justify-content-md-end justify-content-center">
      Email
    </div>
</div>

Just add the classes d-flex to display flex and justify-content-md-end to align at the end of the column for display md and upwards and justify-content-center to align to center for display xs and upwards.

Demo

Shiblu
  • 457
  • 3
  • 12