Reduce Bootstrap list width

Question

I am creating a list and styling it with Bootstrap. The HTML looks something like this:

<div class="list-group">
    <a href="/link" class="list-group-item list-group-item-success">Name</a>
    <a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>

When this displays, the list elements take up the whole page.

If not for the coloring, this would not be a big deal. How can I make the list elements stretch only as far as the text? Thanks!

Divulsion

try adding style display:inline-block to the .list-group – Urbana

@Urbana I tried adding that to the elements but not to the .list-group. That was easy! Thanks so much. – Divulsion

Posted this as answer please accpet my answer if it helped – Urbana

Answer 1

try adding style display:inline-block to the .list-group

.list-group{
      display:inline-block;
 }

<div class="list-group">
    <a href="/link" class="list-group-item list-group-item-success">Name</a>
    <a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>

Urbana

Answer 2

As of Bootstrap 4.6, you can use the class d-inline-block to set the property display: inline-block directly:

<div class="list-group d-inline-block">
    <a href="/link" class="list-group-item list-group-item-success">Name</a>
    <a href="/link" class="list-group-item list-group-item-danger">Name</a>
</div>

See Bootstrap's Documentation on setting the display property.

Riverhead

Answer 3

You can use display:inline or display:inline-block property to get it

.somethingClass > .list-group {
   display:inline-block; /* You can use inline also */
}

HTML PART

    <div class="somethingClass">
    <div class="list-group">
        <a href="/link" class="list-group-item list-group-item-success">Name</a>
        <a href="/link" class="list-group-item list-group-item-danger">Name</a>
    </div>
</div>

When you are using somethingClass > list-group it will effect only list-group when it will come inside the somethingCalss so bootstrap list-group class is save with own propery which gives by bootstrap.

Makeshift

Answer 4

Bootstrap includes shorthand responsive margin and padding utility classes to modify an element’s appearance.

<li class="list-group-item p-0">Something in list.</li>
.p-0 { padding: 0 !important; }

See bootstrap documentation reference for bootstrap 4.0

Forceps

Answer 5

Use the Bootstrap grid system and enclose the list group as in example below.

<div class="col-12 col-md-6">
  <ul class="list-group">
    <li class="list-group-item">one.</li>
    <li class="list-group-item">two.</li>
    <li class="list-group-item">three.</li>
  </ul>
</div>

Gambeson