CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
dragkin
dragkin

Reputation: 89

The height and width for both column different (Bootstrap)

I'm currently new to bootstrap and still wondering on the Grid system, currently facing a problem where the height for both column is different, is there anyway to make it same ?

Refer to Pic 1

Pic when full width

Also there is another problem when i reduce the size as im making it responsive, but when i reduce it to mobile size, the 2nd column did go down but the borders of the 2nd column does not match the first one. Refer to Pic 2

Mobile View

Below is the Html code,

<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info" style="height: 200px;">
  <div class="row col-md-6 bg-info" >
      <img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
  </div>
  <div class="ml-5 col-md-6 bg-info">This is the beauty of nature</div>

Thanks

Upvotes: 0

Views: 63

Answers (2)

Varun Punj
Varun Punj

Reputation: 41

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <div class="container">
      <div class="row bg-info py-3">
        <div class="col-12 col-md-6">
          <img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
        </div>
        <div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
      </div>
    </div> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row bg-info py-3">
    <div class="col-12 col-md-6">
      <img src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" style="object-fit: cover;" alt="Nature of Mountain">
    </div>
    <div class="col-12 col-md-6 pt-2 pt-md-0">This is the beauty of nature</div>
  </div>
</div>

Upvotes: 1

Mehedi Hasan Siam
Mehedi Hasan Siam

Reputation: 1272

The height of the two columns was not the same because you defined the height of the row.

If you make it to show divs in two-column in mobile view then you should use col-sm and also col-xs

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<h1 style="color:blue;">The History of Ice Cream</h1>
<div class="row bg-info">
  <div class="row col-md-6 col-sm-6 bg-info" >
      <img class="px-3" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" width="100%" height="500px" alt="Nature of Mountain">
  </div>
  <div class="ml-5 col-md-6 col-sm-6 bg-info">This is the beauty of nature</div>

Upvotes: 1

Related Questions