CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
user2356301
user2356301

Reputation: 45

Bootstrap 4 - 3 cols in row with different widths that don't stack when screen gets smaller

This may have been posted already but I can't find it. I'm trying to get 3 columns in a row to get smaller (50% middle column and 25% left and right) instead of stacking on top of each other like bootstrap already does with the following code:

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

Does bootstrap's grid system support this or do I have to do it myself?

Upvotes: 1

Views: 1396

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362820

You can use the auto-layout cols, and combine it with the pre-defined grid.

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

https://www.codeply.com/go/XwEJzauAam

col-6 == 50%

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col-6">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

These col and col-* will NOT stack.

The stacking (responsive) columns (by breakpoint) are..

col-sm and col-sm-* - 576px
col-md and col-md-* - 768px
col-lg and col-lg-* - 992px
col-xl and col-xl-* - 1200px

Upvotes: 2

Related Questions