bootstrap ul container is aligning based on text instead of the bullet

Question

I have a series of paragraph text content followed by some unordered lists. When using class="container " on them it does left alignment with the text instead of the bullet point which leads to the bullet points being awkwardly too far left or in some breakpoints actually being partially cut off at edge of screen.

Is there a correct way or bootstrap idiomatic way to change the styling in this case?

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <p class="container">A paragraph.</p> <ul class="container"> <li>A list item</li> <li>Another list item</li> </ul>

Answer 1

The container class has no business on a paragraph or a list. It's intended as an outer structural element on its own or in conjunction with other grid elements, such as rows and columns.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <div class="container"> <p>A paragraph.</p> <ul> <li>A list item</li> <li>Another list item</li> </ul> </div>