Bootstrap Inline Lists with BG Color

Bob Schneider
Bob Schneider used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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-Owner

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018
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?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Bob SchneiderCo-Owner

Author

Commented:
Just a color change for site organizational purposes.
Bob SchneiderCo-Owner

Author

Commented:
Looking at your link, it looks like I should be using the navbar class.  I will switch to that.  Thanks!!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial