CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
Meikel Rizky Hartawan
Meikel Rizky Hartawan

Reputation: 39

padding inside d-flex bootstrap

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="d-flex mr-2">
  <div class="dropdown">
    <button class="btn bg-opacity-25 dropdown-toggle  border border-dark" 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>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

picture example : enter image description here

Upvotes: 0

Views: 1957

Answers (1)

Masud Rana
Masud Rana

Reputation: 304

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

Upvotes: 1

Related Questions