Bootstrap: Removing white-space: nowrap from .btn

[teodragovic]

Reasons being:

• this was originally added in https://github.com/twbs/bootstrap/commit/bfc4aaf6e84f20728258672276ccc9db84638082 but even if core .btn class doesn't have nowrap set it will inherit from .input-group-btn
• on responsive pages it's hard to assure that button copy will always fit available width, making buttons very non-responsive
  
  
  
  • this issue is even more pronounced when working on i18n
  
  
  • going with "make shorter labels as to fit design" solution kinda feels like anti-pattern
  
  

I found myself overriding this property on almost every Bootstrap project I worked and others had the same issue.

[mdo]

Yeah, we could probably tweak this. Wonder how many folks are expecting that property and value to be there though after all this time.

[teodragovic]

Maybe something to consider for v4 then? I think removing that property is very non-destructive change but I see how it can badly impact certain cases.

[mdo]

Yeah punting for consideration in v4.

[christianpv]

Is removing white-space: nowrap; going to be considered for V4?

[karlromanowski]

Still in V4 as of now.

[Herst]

Wonder how many folks are expecting that property and value to be there though after all this time.

That's quite possible @mdo, but there are also numerous SO posts (some with many views/upvotes) which deal with how to change this behavior:

• https://stackoverflow.com/questions/862010/how-to-wrap-text-of-html-button-with-fixed-width
• https://stackoverflow.com/questions/18996202/twitter-bootstrap-button-text-word-wrap
• https://stackoverflow.com/questions/19284153/how-to-get-a-responsive-button-in-bootstrap-3
• https://stackoverflow.com/questions/19587959/bootstrap-tb3-does-not-wrap-button-text-in-bootstrap-tb3-cols
• https://stackoverflow.com/questions/40601340/bootstrap-buttons-overflowing-well-need-to-wrap-and-align
• https://stackoverflow.com/questions/40726929/how-to-wrap-text-on-bootstraps-btn-block-class

I am not sure myself what the correct behavior should be (just like with #24111), I guess it depends on the situation, in some instance you wouldn't want it to go multi-line under any circumstances but in some cases it might be better (also for languages like German you might also want to enable hyphenation).

And even with the current behavior the discussion could be about what to with overflowing text, right now the text overflows into the page unless it's hovered or :active, the rationale for this behavior does not seem obvious to me. BTW, text-overflow: ellipsis is supported in IE10+…