Addressing the List Padding "Gotcha"
Gotcha: List Without Padding (`pl-*`)
Below is a list where `pl-5` (or any `pl-*`) has been omitted.
Notice how the bullets are flush with the left edge, looking cramped or potentially overlapping container borders.
-
Item 1: Bullet is too close to the edge.
-
Item 2: Lacks proper visual spacing.
-
Item 3: Harder to read.
Applied classes: `list-disc` (no `pl-*`)
Corrected: List With Padding (`pl-5`)
This list includes `pl-5`, providing the necessary space for the bullets to display correctly.
This is the recommended way to ensure lists are visually appealing and readable.
-
Item 1: Bullet is nicely indented.
-
Item 2: Proper visual spacing.
-
Item 3: Easier to read.
Applied classes: `list-disc pl-5`
Key Takeaway (Gotcha):
Always remember to add a padding-left utility (like `pl-4`, `pl-5`, `pl-6`, etc.) to your `
` or `
` elements when using `list-disc` or `list-decimal`. The exact padding value can be adjusted to fit your design, but `pl-5` is a common starting point. Without it, list markers (bullets or numbers) might not render as expected, often appearing outside the list's flow or too close to the edge.