Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight list item in Bootstrap

Using the Bootstrap module for Drupal I've found the most recent version changes a style that was

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus

to

a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus

Since my list items are not within a tags the active ones have lost their highlight. The style itself is very simple and I could reproduce it myself, but I'd much rather use the official Bootstrap way to highlight a li. What is it?

like image 762
Craig Avatar asked Nov 28 '13 02:11

Craig


People also ask

How do you inline items of a list with bootstrap?

Placing Ordered and Unordered List Items Inline. If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class . list-inline to the <ul> or <ol> , and the class .

How can you add a badge to a list group in bootstrap?

Add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element.

What is list Group flush?

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

How do I create a list style none in bootstrap?

To remove the list styles in Bootstrap, use the . list-unstyled class.


2 Answers

There is no "official" bootstrap styling for an li element which is not within an anchor tag. You will have to add the styling externally.

like image 111
APAD1 Avatar answered Sep 23 '22 02:09

APAD1


As the OP mentioned, the style for <li> elements worked in Bootstrap 3.0.0, but in the more recent 3.1.1 version, it was removed from the main bootstrap.css file. However, I did find it in the bootstrap-theme.css file, so maybe they decided it should be part of a theme and not part of the core of Bootstrap?

I also found that it is missing from a theme I downloaded from bootswatch.com, so they are probably following the bootstrap core's example and only allowing the active tag on <a> elements.

like image 33
Cindy K. Avatar answered Sep 23 '22 02:09

Cindy K.