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?
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 .
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.
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).
To remove the list styles in Bootstrap, use the . list-unstyled class.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With