Bootstrap Inline Lists with BG Color

How can I add background color to my inline list group:

<ul class="list-inline">
     <li class="list-inline-item">Item 1</li>
     <li class="list-inline-item">Item 2</li>
</ul>
Bob SchneiderCo-OwnerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
The I guess we need to start with what effect you are trying to achieve.

Bootstrap has many styles that can be used in different contexts but it depends what you want to do.

The list group item style is when you want to create a List Group - it has a specific function.

https://getbootstrap.com/docs/3.3/components/#list-group

You specified you wanted to change the background colour - is it just a colour change or is there a specific function that must accompany it?
0
 
Julian HansenConnect With a Mentor Commented:
I am not sure what you are wanting exactly but would this not work

.list-inline {
    background-color: red;
}

Open in new window

0
 
Bob SchneiderCo-OwnerAuthor Commented:
I can use styles if necessary but I was hoping to use some of bootstrap's built-in styles.  For instance, this seems to work with list groups but not with online lists:

<ul class="list-group">
     <li class="list-group-item list-group-item-success">Item 1</li>
     <li class="list-group-item list-group-item-info">Item 2</li>
</ul>

Open in new window


I am looking for a similar approach to inline lists if possible.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Bob SchneiderCo-OwnerAuthor Commented:
Just a color change for site organizational purposes.
0
 
Bob SchneiderCo-OwnerAuthor Commented:
Looking at your link, it looks like I should be using the navbar class.  I will switch to that.  Thanks!!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.