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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I am not sure what you are wanting exactly but would this not work

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

Open in new window

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.
Julian HansenCommented:
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?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Bob SchneiderCo-OwnerAuthor Commented:
Just a color change for site organizational purposes.
Bob SchneiderCo-OwnerAuthor Commented:
Looking at your link, it looks like I should be using the navbar class.  I will switch to that.  Thanks!!
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.