Kevin Powell - Community•10mo 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•10mo 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

Jeyco•10mo ago

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

Jeyco•10mo ago

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

MarkBoots•10mo ago

with p-0 on the cols it will probably fit

Jeyco•10mo ago

not quite :c

Jeyco•10mo ago

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

MarkBoots•10mo ago

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

Skylark•10mo 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•10mo ago

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

Skylark•10mo ago

They’re both awful

Gaming

Programming

Bootstrap