Different alignment for laptop and mobile

Question

I have the follow html in Angular2.

<div class="col-xs-12 col-lg-8" >
  <p style="font-size: 30px">
    {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
  </p>
</div>

In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?

Thank you.

What version of bootstrap? A quick media query would do as you want. — Chris W., Sep 17 '18 at 17:35

score 1 · Answer 1 · answered Sep 17 '18 at 20:06

The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.

Here's the general idea following the BEM CSS naming convention:

<style type="text/css">
.thing {
   ... some styles
}

.thing__title {
    text-align: center;
}

// tablets start at 768px width
@media (max-width: 767px) {
    .thing {
        ... some mobile styles
    }

    .thing__title {
        text-align: left;
    }
}
</style>

<div class="thing col-xs-12 col-lg-8">
    <p class="thing__title">... some text</p>
</div>

No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.

Good point on targeting modifier classes. I didn't think about pointing this out in my answer. — Marvin WordWeaver Parsons, Sep 17 '18 at 20:22

score 0 · Answer 2 · answered Sep 17 '18 at 17:40

0

Can you use jquery?

$('.col-xs-12').css('text-align','center');

answered Sep 17 '18 at 17:40

JavaSheriff

7,074
20
89
159

Marvin WordWeaver Parsons · Answer 3 · 2018-09-17T20:30:57.293

There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.

Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.

So you might try something like this:

<div class="teacher-info col-xs-12 col-lg-8" >
    <p class="ta-xs-left" style="font-size: 30px">
        {{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
    </p>
</div>

<style>
// Default to center the paragraph to center
.teacher-info p {
    text-align:center;
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
    // When the screen is larger than a tablet, left align the text
    .ta-xs-left {
        text-align:left;
    }
}
</style>

Edit

In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.

Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.

Different alignment for laptop and mobile

3 Answers3