CODEWITHSUNDEEP
htmlcssangularbootstrap-4
irkhaladkar
irkhaladkar

Reputation: 49

I want to design two images side to side using bootstrap irrespective of image dimensions but img doesn't adjust itself inside col tag

   <div class="container" style="background-color: aqua;">
        <div class="row">
            <div class="col-md-6">
                <img src="nature.jpeg" class="img-responsive">
            </div>
            <div class="col-md-6">
                <img src="brown.jpg" class="img-responsive">
            </div>
        </div>
    </div>

Image is not adjusting itself inside col-md-6

Upvotes: 0

Views: 568

Answers (2)

Fareed Khan
Fareed Khan

Reputation: 2933

You have to use class w-100 for that

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container" style="background-color: aqua;">
    <div class="row">
      <div class="col-md-6 col-6">
        <img
          src="https://images.unsplash.com/photo-1589987847444-08203b5e123c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60"
          class="w-100">
      </div>
      <div class="col-md-6 col-6">
        <img
          src="https://images.unsplash.com/photo-1589987847444-08203b5e123c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60"
          class="w-100">
      </div>
    </div>
</body>

</html>

Upvotes: 1

Dev Utkarsh
Dev Utkarsh

Reputation: 1496

Use the following tag for responsive image - 

<img src="..." class="img-fluid" alt="Responsive image">

Refer to the documentation here.

Upvotes: 0

Related Questions