CODEWITHSUNDEEP
cssdropdownbootstrap-4
Abdennour TOUMI
Abdennour TOUMI

Reputation: 93621

Inline Select with text using Bootstrap v4

I am looking for an inline dropdown like the following using Bootstrap v4 :

enter image description here

I tried many cases, and the closest one until now is :

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

The problem as you see ,the toggler should not be a button , it might be span .. Which css rules that we need to add it to reach something like in the screencast above.

Upvotes: 0

Views: 1125

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362880

The dropdown open is triggered by any element using data-toggle="dropdown".

https://www.codeply.com/go/oYI9nZEWBy

  <h4 data-toggle="dropdown">
        Open Dropdown
  </h4>
  <ul class="dropdown-menu">
       <a class="dropdown-item" href="#">
           ...
       </a>
  </ul>

Upvotes: 0

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93621

Got it !

  • Add d-inline-flex to the container.

  • Change button by span & remove btn class & add font-weight-bold class.

      <div class="dropdown d-inline-flex">
    Show me posts by: <span class="dropdown-toggle font-weight-bold"id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </span>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

Upvotes: 1

Related Questions