# CSS bullet

**URL:** <https://forum.kirupa.com/t/css-bullet/185264>\
**Category:** web dev\
**Created:** [April 12, 2006, 1:58am UTC](https://forum.kirupa.com/t/css-bullet/185264 "2006-04-12T01:58:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [April 12, 2006, 1:58am UTC](https://forum.kirupa.com/t/css-bullet/185264/1 "2006-04-12T01:58:54Z")

</div>

CSS questions…  
[LIST=1]  
[_]How do you get rid of the indent that is automatically put into a bullet list?  
[_]How can I set different bullet graphics for different levels of indentation?  
[\*]How can I set only level-one indented text to be bold?  
[/LIST]

---

<div class="post-metadata">

**Author:** ![Vexir](https://avatars.discourse-cdn.com/v4/letter/v/a183cd/32.png) [@Vexir](https://forum.kirupa.com/u/Vexir)\
**Post date:** [April 12, 2006, 2:15am UTC](https://forum.kirupa.com/t/css-bullet/185264/2 "2006-04-12T02:15:41Z")

</div>

Actually this is something that I want to know too… Nokrev?

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [April 12, 2006, 3:01am UTC](https://forum.kirupa.com/t/css-bullet/185264/3 "2006-04-12T03:01:45Z")

</div>

> [@NeoDreamer](#):
>
> How do you get rid of the indent that is automatically put into a bullet list?

```auto

ul {
	margin: 0;
	padding: 0;
}

```

> [@NeoDreamer](#):
>
> How can I set different bullet graphics for different levels of indentation?  
> How can I set only level-one indented text to be bold?

```html

<ul class="level1">
	<li>
	<ul class="level2">
		<li>text</li>
		<li>text</li>
	</ul>
	</li>
</ul>

```

then use list-style-type in your css…

```auto

.level1 {
	font-weight: bold;
}
.level2 {
	font-weight: normal;
}

```

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [April 12, 2006, 3:08am UTC](https://forum.kirupa.com/t/css-bullet/185264/4 "2006-04-12T03:08:45Z")

</div>

> [@Vexir](#):
>
> Actually this is something that I want to know too… Nokrev?

:lol: did I miss something?.. I’ve rarely seen Nokrev answer a client-side problem 😉

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [April 12, 2006, 3:12am UTC](https://forum.kirupa.com/t/css-bullet/185264/5 "2006-04-12T03:12:52Z")

</div>

to follow up, in the end, you might have something like this:

```auto

<html>
<head>
<style>
ul {
	margin: 0;
	padding: 0;
}
.level1 li {
	margin: 0 0 0 20px;
	font-weight: bold;
	list-style-type: circle;
}
.level2 li {
	margin: 0;
	font-weight: normal;
	list-style-type: square;
}
</style>
</head>
<body>
<ul class="level1">
	<li>Level 1
		<ul class="level2">
			<li>text</li>
			<li>text</li>
		</ul>
	</li>
</ul>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [April 12, 2006, 4:41pm UTC](https://forum.kirupa.com/t/css-bullet/185264/6 "2006-04-12T16:41:25Z")

</div>

Your code works very well. The only problem is that my bullet graphics do not line up exactly with each line. Is there any way to tweak the position of the bullet?

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [April 12, 2006, 4:44pm UTC](https://forum.kirupa.com/t/css-bullet/185264/7 "2006-04-12T16:44:29Z")

</div>

> [@NeoDreamer](#):
>
> Your code works very well. The only problem is that my bullet graphics do not line up exactly with each line. Is there any way to tweak the position of the bullet?

change the margins on your list classes.

---

<div class="post-metadata">

**Author:** ![Jeff\_Wheeler](https://avatars.discourse-cdn.com/v4/letter/j/59ef9b/32.png) [@Jeff\_Wheeler](https://forum.kirupa.com/u/Jeff_Wheeler)\
**Post date:** [April 14, 2006, 3:35am UTC](https://forum.kirupa.com/t/css-bullet/185264/8 "2006-04-14T03:35:37Z")

</div>

> [@simplistik](#):
>
> :lol: did I miss something?.. I’ve rarely seen Nokrev answer a client-side problem 😉

[ot]Thanks for the compliment. :lol:

I try and come here once in a while… mostly I just view “New Posts” ;)[/ot]