Why is list-group and list-group-item not applying here?-CodePudding

I just stared learing bootstrap 5, and im experimenting with lists. I have this simple code:

<ul >
<li >Cras justo odio</li>
<li >Dapibus ac facilisis in</li>
<li >Morbi leo risus</li>
<li >Porta ac consectetur ac</li>
<li >Vestibulum at eros</li>
</ul>

Did someone ran into this problem before? And yes an did save and refresh! There is also a closing tag for ul (i dont know why stack overflow didnt include it) It just looks like plain html

CodePudding user response：

You ALWAYS need to add Bootstrap (CSS & JS) into your project if you want to use it.

See the snippet below.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Title</title>
</head>

<body>
  <ul >
    <li >Cras justo odio</li>
    <li >Dapibus ac facilisis in</li>
    <li >Morbi leo risus</li>
    <li >Porta ac consectetur ac</li>
    <li >Vestibulum at eros</li>
  </ul>

  <!-- Bootstrap JS bundle -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>