[FIXED] How can I get the badge behind the collapsing menu with bootstrap 4?

Issue

With migrating from bootstrap 3 to bootstrap 4 the items didn't line up anymore. I have search the whole Internet for a solution but I'm out of options now (and patience.. haha)

This is how it looks now:

I like to have the badge to the right side of the text.

Here is the code:

<div className="list-group">
<a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span className="badge badge-default badge-pill">3</span></a>

<div id="Expamle" className="collapse">
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
</div>

Please help!

Solution

Your code works as expected.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">
  Example 
  <span class="badge badge-secondary badge-pill">3</span>
</a>


<div class="list-group">
  <a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">Example
        <span class="badge badge-secondary badge-pill">3</span></a>

  <div id="Expamle" class="collapse">
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
  </div>

I assume you have set a fixed width on list-group-item. Therefore, its content wraps because its display is block.

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

---

Bootstrap does not have badge-default class. It has only the following the classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

---

It is useless to use flex-column because the display of list-group-item is block, not flex. flex-column works only on flex elements.

Answered By - mahan

Answer Checked By - Clifford M. (PHPFixing Volunteer)