rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak list-group to show numbers on list items when used on an <ol>

Browse source
This commit is contained in:
Patrick H. Lauke 2020-11-24 13:09:56 +00:00
parent d61f506a5f
commit 6f9d8d7080
2 changed files with 18 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
scss/_list-group.scss
View file

@ -85,6 +85,12 @@
}
}
// Explicit override to allow numbers to show when using an <ol>
ol.list-group > .list-group-item {
display: list-item;
list-style-position: inside;
}
// Horizontal
//

13
site/content/docs/5.0/components/list-group.md
View file

@ -20,6 +20,18 @@ The most basic list group is an unordered list with list items and the proper cl
</ul>
{{< /example >}}
When the `.list-group` class is applied to an `<ol>` ordered list, list item numbers are also shown.
{{< example >}}
<ol class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ol>
{{< /example >}}
## Active items
Add `.active` to a `.list-group-item` to indicate the current active selection.
@ -254,7 +266,6 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
</div>
{{< /example >}}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our list group to create tabbable panes of local content.