CODEWITHSUNDEEP
htmlcssbootstrap-4
Ivan Alparone
Ivan Alparone

Reputation: 23

Responsive image does not work in Bootstrap

I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?

<header class="masthead text-center text-white d-flex">
  <div class="container my-auto">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <!--immage responsive do not word on bootstrap -->
        <img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">

      </div>
      <div class="col-lg-8 mx-auto">
        <p class="text-faded mb-5"></p>
        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
      </div>
    </div>
  </div>
</header>

Upvotes: 1

Views: 2119

Answers (3)

Andrew
Andrew

Reputation: 316

Ivan

Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.

You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/

You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/

Upvotes: 2

Shubham Chopra
Shubham Chopra

Reputation: 1727

I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.

This is with respect to bootstrap 3

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<header class="masthead text-center text-white d-flex">
                  <div class="container my-auto">
                    <div class="row">
                      <div class="col-lg-10 mx-auto">
        <!--immage responsive do not word on bootstrap -->
                        <img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">


                      </div>
                      <div class="col-lg-8 mx-auto">
                        <p class="text-faded mb-5"></p>
                        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
                      </div>
                    </div>
                  </div>
                </header>

         </body>
</html>

If you are using Bootstrap 4 Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

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

Upvotes: 1

Michał Graczyk
Michał Graczyk

Reputation: 63

Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.

Upvotes: 0

Related Questions