How to Make a Bullet List Align with Text in CSS

How to make a bullet list align with text in css?

Apply padding-left: 0 and change the list style position to inside:

ul  {
  padding-left: 0;
}
ul li {
   list-style-position: inside;
}

Example link http://jsfiddle.net/vF5HF/

How do I line up list bullets in CSS?

Make the ul an inline-block and text-align the list items left.

.div3 {  text-align: center;}
.div3 ul {  display: inline-block;}
.div3 ul li {  text-align: left;}

<div class="div3">  <ul>    <li>Salty is a cat.</li>    <li>This is a list item.</li>    <li>This is a list item.</li>    <li>Salty is fluffy.</li>    <li>This is a list item.</li>    <li>This is a list item.</li>    <li>Salty also has a fluffy tail.</li>    <li>This is a list item.</li>  </ul></div>

Second line in li starts under the bullet after CSS-reset

The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.

The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

---

Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement

• Changed the code block to provide just the solution
• Changed the indentation unit to em’s
• Each property is applied to the ul element
• Good comments :)

Align text in li after bullet

You can add .padding-left to your li elements, and delete your    .

ul {  max-width: 50%;}li {  padding-left: 1em;}

<div style="padding: 4% 4% 4% 6%; margin-bottom: 4%; box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.15);"><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="padding-right: 0px !important;"><p> </p>
<h1>02. Offer</h1>
<ul> <li>Request for company information</li> <li>A concept offer is presented in person</li> <li>When agreed an intention agreement is drawn up</li></ul></div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><img alt="Sample Image" src="https://curaeos.cms.dentconnect.eu/dynamic/media/22/images/curaeos-acquisition-process-offer-300x250.jpg" style="width: 300px; height: 250px; float:right;" /></div></div></div>

How to make bullet points aligned in list

You need to remove the centering of the text inside your ul element:

        <h3 class="text-center">Some Favorites</h3>
        <ul>
            <li>Celery Root</li>
            <li>Spaghetti Squash</li>
            <li>Killer Mushrooms</li>
        </ul>

Here is a working example:

https://jsfiddle.net/m782jg44/1/

If you want to align the entire list - you will have to set it's width and center the container (the ul element, not the text).

Here is a working example:

https://jsfiddle.net/m782jg44/2/

Left-align bullet points with css

you may also use a pseudo element and use pixels instead em:

ul {  padding: 0.5em 0 0 20px;  margin: 0 2em;  background:linear-gradient(to right, transparent 20px, lightgray 20px);}li {  list-style-type: none;  padding-left: 20px;}li:before {  content: '';  float: left;  display: list-item;  list-style-type: disc;  list-style-position: inside;  width: 20px;  margin-left: -20px;}ul.two li {  font-size: 20px;}ul.three li {  font-size: 35px;}ul.hudge li {  font-size: 60px;}

<ul>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li></ul>
<ul class="two">  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li></ul>
<ul class="three">  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li></ul><ul class="hudge">  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li>  <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li></ul>

---

Related Topics