Reduce Bootstrap list width

Question

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


    Name
    Name

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!

user_10535708 · Answer

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

Something in list.
.p-0 { padding: 0 !important; }

user_9997178 · Answer

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


    Name
    Name

See Bootstrap's Documentation on setting the display property.

user_3501144 · Answer

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


  
    one.
    two.
    three.