Kevin Powell - Community•12mo ago

Bootstrap

Hello, There is an issue with the div number 3, where it skips a line (at width = 1263 pixels and below to be exact) eventho it's not supposed to, unless the screen is very small. Am i missing something? Thank you in advance. --------------

<body>
    <section class="row mt-5 m-auto">
        <div class="col-3">
            <div class="row">
                <div class="col-1">1</div>
                <div class="col-1">2</div>
                <div class="col-10">3</div>
            </div>
        </div>
        <div class="col-5">4</div>
        <div class="col-4">5</div>
    </section>
</body>

<body>
    <section class="row mt-5 m-auto">
        <div class="col-3">
            <div class="row">
                <div class="col-1">1</div>
                <div class="col-1">2</div>
                <div class="col-10">3</div>
            </div>
        </div>
        <div class="col-5">4</div>
        <div class="col-4">5</div>
    </section>
</body>

10 Replies

MarkBoots•12mo ago

it has to do with the content and the default padding of the col. a flex item can only shrink as small as the content+padding. that 3rd column just doesnt fit anymore and so it flex-wraps (which is also default in bootstrap row). I am no bootstrap user, so I don't have a clear solution in mind. but you could try overriding the flex-wrap

JeycoOP•12mo ago

@MarkBoots ure correct! flex-wrap: nowrap; worked almost perfectly. here is the new result:

JeycoOP•12mo ago

it goes to the next div which is not practical, but at least it answers my question thank you for ur help!

MarkBoots•12mo ago

with p-0 on the cols it will probably fit

JeycoOP•12mo ago

not quite :c

JeycoOP•12mo ago

also its weird how i have to add p-0 to each div, even tho i already declared that with *{padding:0}

MarkBoots•12mo ago

yea you are just trying to fit so much inside that containers.

Skylark•12mo ago

Also don’t use Bootstrap, it’s unnecessary and dated and you end up having questions like this rather than understanding how things work and having a more flexible solution you know about

b1mind•12mo ago

Boostraps still better than blindly using Tailwind >.>;; (just saying I see this a lot more)

Skylark•12mo ago

They’re both awful

Gaming

Programming

Bootstrap