I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobile devices!
What I'm aiming for is to have two columns in the navbar positioned side by side, with the images scaling down and the text aligned to the right. Right now, the two columns are not sitting next to each other as expected, and the second column is being pushed below due to the images not being responsive.
The larger carousel that I've included seems to be working just fine! I'm puzzled as to why this carousel works while the other images don't. It's possible that I might be making a silly mistake here, so I'd appreciate it if someone could point out where I'm going wrong before I lose all my hair. Thanks a bunch in advance!
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.contact {
text-align: right;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar px-0">
<div class="row col-lg-12 px-0">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-right-padding">
<img class="img-fluid" src="http://via.placeholder.com/160x40" alt=""><img class="img-fluid" src="http://via.placeholder.com/160x40" alt="">
<br>
<a class="navbar-brand" href="index.html">
&cft;img class="img-fluid" src="http://via.placeholder.com/160x160" style="margin-top: 10px;" alt="">
</a>
</div>
<div class="contact col-lg-6 col-md-6 col-sm-6 col-xs-6 px-0">
<p><a href="contact.html">Some heading</a></p>
<div style="padding-top: 30px;">
<p>Some random text
</div>
</div>
</div>
</nav>
<div class="col-lg-12 px-0 carousel slide carousel-fade animated fadeIn" id="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- bootstrap 4 js & jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>