Change text-align responsively (with Bootstrap 3)?

Question

Although the provided solution is absolutely right, I think there is a different approach that could be interesting. Bootstrap does not provide alignment classes that depend on window size, but you can define them:

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

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-justify-sm {
        text-align: justify;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-justify-md {
        text-align: justify;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-justify-lg {
        text-align: justify;
    }
}

Then, you could add this classes to your html elements:

<body class="text-justify-lg">

You can also create css rules for text-left-xx and text-right-xx.

Leave a Comment Cancel reply