Why Bootstrap 5 buttons are not using display: inline-flex

A Web Developer based in Belgium, specialized in PHP & JS development
Search for a command to run...

A Web Developer based in Belgium, specialized in PHP & JS development
No comments yet. Be the first to comment.
I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

A couple of months ago, I've opened an issue about buttons not using display: inline-flex. Since Bootstrap 5 aims to be a modern framework, you could be surprised that it's still using display: inline-block.
Recently, I was reading another tutorial about styling buttons. The recommended way was to use display: inline-flex. And as a matter of fact, it seems there is only benefits to do so: things align nicely automatically, which is very useful when using buttons with icons for example.
But actually, there are some subtle issues that might arise...
The first issue you can get with display: inline-flex is when you have html inside your button. Child nodes will get a flex layout and space between them will collapse. There are two ways to fix this:
.btn-flex-fix > * {
margin-right: 0.5ch;
}
On top of that, it can get even uglier if you try to fit very long content inside a very small container since flex items get a flex-wrap: nowrap value by default: you end up with columns inside your buttons... probably not what you expect. This is fixed easily by using flex-wrap: wrap.
And this is why Bootstrap 5 is not using flex buttons, to avoid these edge cases.
Probably, the safest way is to simply add the flex class yourself. You could try something like this:
.btn-flex {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
flex-wrap: wrap;
}
.btn-flex > * {
margin-right: 0.5ch;
}
This should be very safe and should work most of the time! If you are brave enough, you can even apply these changes to the btn class globally.
A playground to show what is explained in this article