CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Grizzly
Grizzly

Reputation: 5943

Aligning UL Bullets Bootstrap

I have a list:

<div class="row">
  <div class="col-md-12">
    <ul class="text-center" style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

The output:

List Output

How do I get the bullet points to align even if the li elements aren't the same length, but keep the list centered?

Here is a Bootply.

Upvotes: 1

Views: 5864

Answers (4)

Jayant Rawat
Jayant Rawat

Reputation: 43

Try this

 <div class="row">
  <div class="col-md-7 col-md-offset-5">
    <ul class="text-center" style="list-style-position: inside; vertical-align: middle;text-align:left">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

Upvotes: 0

Anshul
Anshul

Reputation: 128

You can use bootstrap offset class

<div class="row">
  <div class="col-md-2 col-md-offset-5">
    <ul style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

Bootply

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

You need to make the UL inline-block like this:

<div class="row">
    <div class="col-md-12 text-center">
      <ul class="text-left" style="display:inline-block;vertical-align:middle;">
        <li>1234</li>
        <li>123456789123</li>
        <li>123456789123</li>
      </ul>
    </div>
</div>

http://www.bootply.com/XFzwCr74vu

Upvotes: 3

Anshul
Anshul

Reputation: 128

You need to simply remove the class text-center.

Bootply

<div class="row">
  <div class="col-md-12">
    <ul style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions