CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Omnilord
Omnilord

Reputation: 884

Bootstrap UL with bullets

I need a ul with bullets with bootstrap loaded on the page. I cannot find a single example of how to do this with bootstrap on the page (google only results in examples to REMOVE bullets, not show bullets). Is there a class I should be adding that is undocumented?

I have tried adding

ul {
    list-style-type: disc !important;
}

does absolutely nothing: https://jsfiddle.net/49kwo5pL/2/

The documentation (http://getbootstrap.com/css/#unordered) says you have to add a class to remove the bullets, but that doesn't see to be the actual case.

Upvotes: 10

Views: 31686

Answers (4)

raba64577
raba64577

Reputation: 91

What worked for me to show the bullet points is changing the bootstrap display: block for the list-item class to this: display: revert. That's all!

Then I just added padding/margin as other answers suggested.

Upvotes: 0

SAGA
SAGA

Reputation: 349

Accepted answer didn't work for me, however after small tweak I manged to get it work. May be this will help someone. Thanks.

ul {
  padding-left: 1em !important;
  margin-left: 1em;
}

li {
  list-style-type: disc !important;
}

Upvotes: 2

divy3993
divy3993

Reputation: 5810

By default ul has padding and margin which Bootstrap removes in its CSS.

So try adding it.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');


ul {
    list-style-type: disc !important;
    padding-left:1em !important;
    margin-left:1em;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul>
    <li>Why</li>
    <li>are</li>
    <li>there</li>
    <li>no</li>
    <li>bullets?!?!?!!?!?!?</li>
</ul>

Upvotes: 10

Blazemonger
Blazemonger

Reputation: 92893

The left padding is also removed by Bootstrap. Add it back to reveal the bullets.

ul {
    list-style-type: disc !important;
    padding-left: 1em;
}

https://jsfiddle.net/mblase75/49kwo5pL/3/

Upvotes: 7

Related Questions