Resolved: padding inside d-flex bootstrap

Question:

i try to use padding inside d-flex to seperate the element that become one inside the d-flex class, but when i try to add padding, it’s not working and change nothing, if i don’t use the d-flex, the element won’t become inline one by one so i need to use d-flex but in d-flex , the padding is not working, how to properly use it
code example :

            <div class="d-flex pr-2">

              <div class="dropdown pr-2">
              
                <button class="btn bg-opacity-25 dropdown-toggle  border border-dark pr-2" style="" id="pageMenu" data-bs-toggle="dropdown"><i class="bi bi-microsoft"> </i></button>
                <ul class="dropdown-menu" aria-labelledby="pageMenu">
                  <li><a class="dropdown-item" href="#">5</a></li>
                  <li><a class="dropdown-item" href="#">10</a></li>
                  <li><a class="dropdown-item" href="#">25</a></li>
                </ul>


              </div>

              <div class="dropdown">

              <button class="btn bg-opacity-25 dropdown-toggle border border-dark" style="" id="filterMenu" data-bs-toggle="dropdown"><i class="bi bi-funnel"> Filter</i></button>
                <ul class="dropdown-menu" aria-labelledby="filterMenu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>

              </div>

            </div>

picture example :

Answer:

Padding will add space inside the border of the element. You can fix the issue by adding a class your-class in the flex container and giving a gap: 20px using CSS on the parent element. It will separate the elements from each other.

.your-class {
 gap: 20px
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<div class="d-flex mr-2 your-class">

  <div class="dropdown pr-2">

    <button class="btn bg-opacity-25 dropdown-toggle  border border-dark pr-2" style="" id="pageMenu" data-bs-toggle="dropdown"><i class="bi bi-microsoft"> </i></button>
    <ul class="dropdown-menu" aria-labelledby="pageMenu">
      <li><a class="dropdown-item" href="#">5</a></li>
      <li><a class="dropdown-item" href="#">10</a></li>
      <li><a class="dropdown-item" href="#">25</a></li>
    </ul>


  </div>

  <div class="dropdown">

    <button class="btn bg-opacity-25 dropdown-toggle border border-dark" style="" id="filterMenu" data-bs-toggle="dropdown"><i class="bi bi-funnel"> Filter</i></button>
    <ul class="dropdown-menu" aria-labelledby="filterMenu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>

  </div>

</div>

If you have better answer, please add a comment about this, thank you!

Resolved: padding inside d-flex bootstrap

Resolved: EntityFramework creates/runs migrations using parameterless DataContext instance

Resolved: Visual Studio 2022 crashes when using breakpoints

Resolved: How to get Union type from an array of objects in Flow?

Leave A Reply