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.

A bit of background

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...

Space issues

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:

• Always add a parent span, which adds extra html to all your buttons (not ideal)
• Fix space by adding margin, see below:

.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.

But what if I want to use flex-buttons ?

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