How can I have a horizontal scrollable element with bootstrap?

Question

I have this:

This is what I have - and I don't want the icons to wrap on 2 lines.

I have:

<li class="list-group-item participants-grouping-li">
  <span class="avatar">....
</li>

And I tried:

.participants-grouping-li {
  overflow-x: scroll;
}

But no dice. What am I missing? I'm focusing on making this mobile friendly, obviously.

Answer 1

Try below-mentioned snippet:

.participants-grouping-li {
  overflow-x: scroll;
  white-space: nowrap;
}