Question 44237 in Html Question posted in
Some basic documentation can be found here.

Row cols aren't aligning – image is going into a completely new row – Html

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!

Example

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
Tags:

2

Answers


  1. 0

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    I think using flexBox will give you more control

    <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="d-flex flex-nowrap">
  <div class="p-2">
    <h1 class="text-justify">Name</h1>
    <p class="text-justify">Company</p>
    <p class="text-justify">Role</p>
  </div>
  <div class="p-2">
    <img class="img-fluid w-25 float-end" src="https://via.placeholder.com/200.png">
  </div>
</div>

    Documentation on flex and the wrap properties

    (I’m not familiar with bootstrap so my example will need some tweaking. This would be my approach using vanilla css.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search