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

A couple of months ago, [I've opened an issue](https://github.com/twbs/bootstrap/issues/34058) 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](https://moderncss.dev/css-button-styling-guide/). 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

%[https://codepen.io/lekoalabe/pen/JjWExoN]