title: Image fluid not working on Bootstrap 4
body: <p>I am having trouble with making images responsive with Bootstrap 4? When the code below renders to the browser there are three images in the navbar (top left). I am having issues with these three images scaling down in size when viewed on mobile!</p>
  
  <p>I would like the two colunms in the navbar to sit side by side with the images scaling down and the text aligned to the right. At this moment the two columns do not sit side by side as the second column is forced below as the images are not responsive?</p>
  
  <p>I have a larger carousel included and this seems to work fine! I am not sure why this is working and the other images are not? I am probably doing something really stupid here but I would appreciate someone highlighting where I am going wrong to save me from pulling out my hair. Thanks in advance</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
      &lt;style type="text/css"&gt;
        .contact {
          text-align: right;
        }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container-fluid"&gt;
      &lt;nav class="navbar px-0"&gt;
        &lt;div class="row col-lg-12 px-0"&gt;
          &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-right-padding"&gt;
            &lt;img class="img-fluid" src="http://via.placeholder.com/160x40" alt=""&gt;&lt;img class="img-fluid" src="http://via.placeholder.com/160x40" alt=""&gt;
            &lt;br&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;
              &lt;img class="img-fluid" src="http://via.placeholder.com/160x160" style="margin-top: 10px;" alt=""&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="contact col-lg-6 col-md-6 col-sm-6 col-xs-6 px-0"&gt;
            &lt;p&gt;&lt;a href="contact.html"&gt;Some heading&lt;/a&gt;&lt;/p&gt;
            &lt;div style="padding-top: 30px;"&gt;
              &lt;p&gt;Some random text
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="col-lg-12 px-0 carousel slide carousel-fade animated fadeIn" id="carousel" data-ride="carousel"&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="carousel-item active"&gt;
              &lt;img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="First slide"&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Second slide"&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img class="img-fluid" src="http://via.placeholder.com/1736x890" alt="Third slide"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- bootstrap 4 js &amp; jQuery --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>