I gave my image class "img-fluid" in Bootstrap but it doesn’t fit my web page what should I do?
<img src="images\406201.jpg" class="img-fluid" alt="...">
<div style="margin-top: 0px ;margin-left: 12px; width: 98.4%;" class="footer bg-dark text-light p-5">
<h3 style="text-align: center;">follow Us</h3>
<div class="d-flex justify-content-center flex-wrap">
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images/facebook-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images\twitter-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="images\instagram-logo-png-transparent-0.png" class="bg-light" alt=""></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="images\telegram-logo-png-0.png" class="bg-light" alt=""></a>
</div>
<h4 style="text-align: center; margin-top: 15px;">Powered by Marvel Studious</h4>
</div>
When I give it style="width=100%" it works but the problem is it doesn’t need CSS.
I'm not sure if this is the problem, but img-fluid puts the image in the maximum size possible given where it is, for example, if it is inside a div, the image will be the size of the div and not the screen, so make sure you don't have the image inside something that is limiting its size
Put the image in a div with class "container-fluid".
<style>
.width-complete{
width:100%
}
</style>
<div class="container-fluid">
<img src="images\406201.jpg" class="width-complete" alt="...">
</div>