CODEWITHSUNDEEP
cssbootstrap-4flexbox
M.KH
M.KH

Reputation: 440

bootstrap change flex direction at certain breakpoints?

i'm using bootstrap 4, i have a div that got d-flex and it's supposed to display direction row at the "lg" (screens 1200px and greater) breakpoint and when it's used on a mobile phone "sm" or "xs" breakpoint would be used and it would display direction column and behave like a column, but no matter how i try it, it just stays a row all the time

i tried

<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">

and

<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">

but it doesn't work..am i misunderstanding the breakpoint system or something? i mean i would do the same using the CSS media queries.

here is the full code

<div class="w-75 my-5 mx-auto">
                <h1 class=" text-center my-3">Awards won</h1>

                <div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
                    
                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award1.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Best cake made in 2019</span>
                    </div>

                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award2.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
                    </div>

                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award3.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Most satisfied customers award</span>
                    </div>

                </div>
            </div>

Upvotes: 4

Views: 12189

Answers (1)

M.KH
M.KH

Reputation: 440

solved it, it seems bootstrap handles the xs breakpoint by not including a breakpoint value in the class utility

<div class="d-flex flex-column flex-lg-row justify-content-around">

this works

Upvotes: 18

Related Questions