Trying to work on making the header portion of my website (starting with the mobile class). When I am trying to create a col-xs-7 which contains one h1 and two p tags, and a col-xs-5 which contains an image. The col-xs-7 completely takes over the entire row and throws the col-xs-5 column into a new row. Spent some time reading documentation and similar questions, but still got the same results. Below is a diagram of the results I’m getting and a code snippet. Cheers!
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-xs-7">
<h1 class="text-justify">Name</h1>
<p class="text-justify">Company</p>
<p class="text-justify">Role</p>
</div>
<div class="col-xs-5">
<img class="img-fluid w-25 float-end" src="https://via.placeholder.com/200.png">
</div>
</div>
</div>
>Solution :
The issue is caused by the class float-end class on the image which moves the element out of flow and floats it. Also note, that Bootstrap 5+ has no xs breakpoint as it is the default breakpoint.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-7">
<h1 class="text-justify">Name</h1>
<p class="text-justify">Company</p>
<p class="text-justify">Role</p>
</div>
<div class="col-5">
<img class="img-fluid w-100" src="https://via.placeholder.com/200.png">
</div>
</div>
</div>