'Reduce Bootstrap list width

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.screenshot of HTML

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!

htmlcsstwitter-bootstraphtml-lists


Solution 1:[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>

Solution 2:[2]

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.

Solution 3:[3]

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

Solution 4:[4]

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.

Solution 5:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 XYZ
Solution 2
Solution 3 Lenge
Solution 4 Sjiun
Solution 5 Senthil

Related Questions