conditional align for bootstrap text-center-CodePudding

I use a div like this..

<div id="book" >

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?
}

CodePudding user response：

Solution:

 @media only screen and (max-width: 480px) {
      #book{
        float:left;
      }
    }

<div id="book" >
    Test Text
    </div>

CodePudding user response：

Just add the css right away


@media only screen and (max-width: 480px) {
  .text-center {
    text-align: left !imporant;
  }
}

But you must import the CSS AFTER the bootstrap, or the bootstrap will override your CSS, instead of you override it. But there are other solution write

this mean on sm screen width, center the CSS, and left below sm https://getbootstrap.com/docs/4.0/utilities/text/