bootstrap unordered list with bullets
Question
How do I show the bullets for an unorderlist in bootstrap. I have the following html
<body>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
<li class="list-group-item border-0">
Do you need a research on your particuar ancestor or your goal is to make a family tree?
</li>
<li class="list-group-item border-0">Do you want to know how home of your ancestor looked like, if it's still there? We will provide photos!</li>
<li class="list-group-item border-0">Do you need to obtain a specific record (birth, marriage, death certificates, Census, tax, property ownership, etc)? </li>
<li class="list-group-item border-0">Do you want to find and visit your ancestral town and talk with locals to hear some family lores about your ancestors?</li>
<li class="list-group-item border-0">Do you need to find a grave, house or plot where your ancestors lived?</li>
<li class="list-group-item border-0">Do you need a guide through local archives or repositories while doing your research in Eastern Europe? </li>
<li class="list-group-item border-0">Do you want to find a living relative or missing heir for an estate?</li>
<li class="list-group-item border-0">Do you need a priceless gift for your parents, relatives or colleagues? </li>
</ul>
</div>
</div>
</body>
In my default1.css I am doing the following but it doesn't show the bullets. Please help.
.list-group-item border-0 {
list-style-type: disc !important;
padding-left: 1em;
}
1 answers
solution1
2 ACCPTED 2020-10-11 23:28:08
Firstly, you have a typo. border-0 needs a period in front of it to specify it as a class selector instead of an element selector like this:
.list-group-item .border-0 {
list-style-type: disc !important;
padding-left: 1em;
}
Secondly, you don't need to be that specific with this amount of code. All you need is list-group-item . Try this:
.list-group-item::before {
content: "●";
margin-right: 0.75rem;
}
::before is a pseudo element that you can use to put content before an element, but you have to give it content with the content: "●" property.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.