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

I have a series of paragraph text content followed by some unordered lists. When using 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<p >A paragraph.</p>

<ul >
  <li>A list item</li>
  <li>Another list item</li>
</ul>



    
CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div >
  <p>A paragraph.</p>

  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
</div>