Why cols go under each other when they are in the same row?

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="bootstrap.css">
	</head>
	<body style="background-color: #FF69B4">
<div  class="container-xxl">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
    <a class="navbar-brand" href="#">
    <img src="unnamed.jpg" width="100px;" style=" border-radius: 50%; width: 40px; height: 40px!important;"></a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Clover <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sam</a>
      </li>
     
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Alex</a>
      </li>
    </ul>
    
  </div>

</nav>


<div class="row" >
	
<div  id="col-sm-4">
aaaa
</div>
<div id="col-sm-4">
kkkk
</div>
<div id="col-sm-4">
</div>


</div>
		<div class="row">
  
<div id="col-lg-4">
</div>
<div id="col-lg-4">
</div>
<div id="col-lg-4">
</div>

</div>

</div>
</div>


	</body>
</html>

I would like them to be next to each other.Thank you!

are you sure you wanted to use id? ids must be unique, you can’t have more than one elemnt with the same id

You are right, I changed it to class and it’s working now. Thank you!