How to make space between items using d-flex

Question

I still do not know where I should separate my items by grid system and col and when to use d-flex? Imagine I have 4 buttons:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
  <button class="btn">First</button>
  <button class="btn">second</button>
  <button class="btn">Third</button>
  <button class="btn">fourth</button>
  <button class="btn">Fifth</button>
  <button class="btn">six</button>
</div>

I have items in row and center but without padding out space among them, how can I achieve it? And should I use col and row or flex?

Answer 1

Maybe you need to migrate to Bootstrap 5 and use the gap spacing utility.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-center gap-3">
  <button class="btn btn-outline-secondary">First</button>
  <button class="btn btn-outline-secondary">second</button>
  <button class="btn btn-outline-secondary">Third</button>
  <button class="btn btn-outline-secondary">fourth</button>
  <button class="btn btn-outline-secondary">Fifth</button>
  <button class="btn btn-outline-secondary">six</button>
</div>

Take a look on: https://getbootstrap.com/docs/5.3/utilities/spacing/#gap

Also: https://getbootstrap.com/docs/5.0/migration/

Answer 2

In Bootstrap 5, There is an option to use gap. Using the gap you can provide space between flex items. I was also struggling with the same issue and i don't wanted to use margin or padding. So gap is the best solution for me.

.d-flex{
  gap:20px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
  <button class="btn">First</button>
  <button class="btn">second</button>
  <button class="btn">Third</button>
  <button class="btn">fourth</button>
  <button class="btn">Fifth</button>
  <button class="btn">six</button>
</div>