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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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

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
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?
0

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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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.