0

how to make a bootstrap responsive collapsible horizontal panels like on the image below?

Will be really thankful if someone could show me how to acheive it.

enter image description here

Thanks alot, really appreciate your help

Abigail
  • 63
  • 5

1 Answers1

1

select {
  width: 100%;
  margin: 4px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #e7ebee;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row row-cols-3">
    <div class="col flex-column">
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col flex-column">
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col flex-column">
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <select>
        <option selected>Select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
</div>
fnostro
  • 4,531
  • 1
  • 15
  • 23
  • thanks but the above image is not selection drop down its a collapsible panel which expands and collapses on click – Abigail May 21 '22 at 06:01
  • Actually, it is, but with a bunch of JS converting the options to a collapsible panel. Quickest option is to find a third party, bootstrap compatible "addon" that gives you that look and feel. – fnostro May 21 '22 at 06:19