Menu
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>
461
col-sm-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .
Responsive breakpoints // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
Extra large devices are defined as having a screen width from 1200 pixels and above.
Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.
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
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
