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 1:

See this :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>

    @media (max-width: 575.98px) {
        .text-center {
            text-align: left !important
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .text-center {
            text-align: left !important
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .text-center {
            text-align: left !important
        }
    }
</style>

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

This code generates the output you expect.

You should note that these CSSs are placed after the bootstrap tag.

result for big screen :

enter image description here