cssbootstrap-5

How to change the width of Bootstrap dropdown list on screen width change?

I have a 480px wide dropdown list, and by using a (row) I have divided it into two parts (col-6), 240px each.

The problem I am having is that on small screens, the col-6 inside the row, do not collapse into a single vertical column but stays 480px wide.

What I would like to do is the following:

On screens min-width: 768px, the dropdownlist has to be horizontal, divided into two col-6 columns.

On screens max-width: 768px, the dropdownlist has to be vertical, the col-6 columns, falling one after the other.

How can this be done?

@media (min-width: 768px) {
  .sizefit {
    min-width: 540px !important;
  }
}

@media (max-width: 768px) {
  .sizefit {
    /* min-width: 240px !important; */
    max-width: 240px !important;
    /* min-height: 480px; */
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<ul class="dropdown-menu pre-scrollable " aria-labelledby="menu1">
  <li class="divider border-bottom">
    <div class="row sizefit">
      <div class="col-sm-12 col-6 maxw-240px d-inline">
        <ul>
          <li class="divider border-bottom">
            <a asp-page="./Profile" asp-route-id="@item.Id"
                class="btn btn-sm btn-warning fw-bold border-0 mw-240px maxw-240px text-start text-dark text-dark">
                 Profile_1
             </a>
          </li>
          
          <li class="divider border-bottom">
            <a asp-page="./Profile" asp-route-id="@item.Id"
                class="btn btn-sm btn-warning fw-bold border-0 mw-240px maxw-240px text-start text-dark text-dark">
                 Profile_2
             </a>
          </li>
        </ul>
      </div>
      
      <div class="col-sm-12 col-6 maxw-240px d-inline">
        <ul>
          <li class="divider border-bottom">
            <a asp-page="./Edit" asp-route-id="@item.Id"
                class="btn btn-sm btn-warning fw-bold border-0 mw-240px maxw-240px text-start text-dark text-dark">
                 Edit
             </a>
          </li>
          
          <li class="divider border-bottom">
            <a asp-page="./Delete" asp-route-id="@item.Id"
                class="btn btn-sm btn-warning fw-bold border-0 mw-240px maxw-240px text-start text-dark text-dark">
                 Delete
             </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Solution

  • Basically, you want each part to be 50% or 100% of the width of the container .sizefit depending on screen width. You don't even need bootstrap for that. Although I think classes .col-xs-6 or .col-sm-6 should work.

    .sizefit {
  border: 1px solid black;
}

.sizefit>div {
  width: 100%;
}

@media (min-width: 768px) {
  .sizefit>div {
    width: 50%;
  }
}