Search code examples
cssmedia-queries

conditional align for bootstrap text-center

I use a div like this..

<div id="book" class="justify-content-center text-center">

This is fine for desktops, but when on mobile device I need to align text to the left instead. What do I need to add in my media query so that text is left aligned instead when on mobile device?

@media only screen and (max-width: 480px) {
// What do I add here to "override" the text-center so that it align to left instead?
}
Solution

  • Solution: Do not overwrite the bootstrap classes justify-content-center text-center. Overwrite the unique ID book only.

     @media only screen and (max-width: 480px) {
      #book{
        float:left;
      }
    }
    <div id="book" class="justify-content-center text-center">
    Test Text
</div>