Bootstrap has numerous utility classes for managing responsiveness. Learn those first.
https://getbootstrap.com/docs/4.6/content/images/
Removing code without knowing Bootstrap could adversely impact the usability of your layout and is not recommended. Also DO NOT edit Bootstrap CSS. If you must create custom styles, use a separate CSS file (i.e. mystyles.css or custom.css).
Websites must perform well on ALL devices -- xsm, sm, md, lg, xlg... and everything in between. <img class="img-fluid"> can make large images scale down to fit smaller devices. But it won't make small images up-scale to fit md, lg & xlg devices. On xlg devices (4-5K displays) a 960px image will look like a tiny postage stamp.
For this reason, it's best practice to serve multiple image sizes to browsers with the <picture> element and SRCSET attributes.
https://getbootstrap.com/docs/4.6/content/images/#picture
A working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 with Picture Element</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-10 mx-auto">
<!--Change browser width to see the image change.-->
<picture class="mx-auto">
<source srcset="https://dummyimage.com/2300x400" media="(min-width: 2299px)">
<source srcset="https://dummyimage.com/1200x300" media="(min-width: 1199px)">
<source srcset="https://dummyimage.com/960x200" media="(min-width: 959px)">
<source srcset="https://dummyimage.com/780x150" media="(min-width: 779px)">
<img class="img-fluid" src="https://dummyimage.com/480x100" alt="placeholder" />
</picture>
</div>
</div>
</div>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope that helps.
Nancy O'Shea— Product User, Community Expert & Moderator
8
Replies
AdChoices