Reports

I need to ask you a question: If you are using col and row class, I hope you had a bootstrap installed in your environment or it's cdn in the html ? Otherwise it won't work so just be sure of that for the next time.

Now with help of row and col class what we effectively do is split our entire screen in 12 parts. And then with the help of col-6 or col-4, which you have done, assign that many parts to the code. Make sure it doesn't exceed the sum of 12 within a row otherwise it will overflow to the next row.

I have fixed your code accordingly below:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

<title>Page Title</title>
<style>
.msg-first {
  width: fit-content;
  border-radius: 1em;
  background-color: #103a96;
  padding-left: 1em;
  padding-right: 1em;
  float:right;
  padding-top: .4em;
  padding-bottom: .4em;
  margin-right: .5em;
  margin-top: -2%;
}
</style>
</head>
<body>

<div class="row">
<div class="col-6"></div>
<div class="col-6"><p class="msg-first">Thank you five.</p></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"><p class="msg-first">Shoot.</p></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"><p class="msg-first">I mean, I'll be there soon, Nelly.</p></div>
  </div>
</body>
</html>

79622683