Disable column wrapping in Bootstrap 4

Question

I'm currently faced with the following situation:

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

So, the first column will occupy the space available that is not being filled by the second column

i.e. [ |--------column1--------| |column2| ]

My issue is when the content inside column1 has a width larger than the containing row. What happens is, instead of column1 shrinking to still fit both columns in the same row line, column1 fills the whole row as if it was col-12 and column2 drops down to a new line, hence wrapping the columns.

Is there way to prevent this behaviour and always keep both columns in the same line?

maybe [this](https://stackoverflow.com/a/32846418/8583681) answer could help you — Nenri, Feb 28 '19 at 11:28
@Paulie_D reproduced here - https://codepen.io/anon/pen/pYjWOo — joao-m-santos, Feb 28 '19 at 11:37
`white-space:nowrap` is the issue. That's what you asked for, that's what you are getting. — Paulie_D, Feb 28 '19 at 11:43
@Paulie_D may I ask where that CSS styling got applied in OP's question? — Cloud, Feb 07 '20 at 07:44

Carol Skelly · Accepted Answer · 2020-03-08T13:53:55.013

12

Normally the flex-nowrap class can be used on the row to prevent col wrapping in Bootstrap 4. In this case that won't work because of the wide, ellipsis content in the column.

Due to the way flexbox width is calculated (explained here and here), you should set a width, min-width, or max-width (any width) on the flex-grow:1 column (col).

For example, set width:0 on the col...

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

https://codeply.com/go/JKLUD0NLn4

Also, don't use both col and col-auto on the same column. The flex-grow:1 of col, will prevent the col-auto from shrinking.

edited Mar 08 '20 at 13:53

answered Feb 28 '19 at 11:55

Carol Skelly

351,302
90
710
624

1

Regarding the first part of your answer, it seems that `flex-nowrap` causes column2 to be outside the row itself, to the right of column1, which takes up all the space – Cloud Feb 07 '20 at 07:49
`width: 0;` does not work in Firefox. `min-width: 0;` does work in both Chrome and Firefox. – Roland Starke Sep 28 '20 at 11:18

Disable column wrapping in Bootstrap 4

1 Answers1