title: Why are my images extending outside their parent columns?
body: <p>I am creating a web application in asp.net and I am using bootstrap version 4 for the layout of the site.</p>
  <p>I have the following code to include a title on the left hand side (with some additional text) and then the image on the right, however when I resize the screen the image overlaps the &quot;Welcome to the site&quot; before it then eventually stacks the columns.</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row portal-intro&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;p class=&quot;home-header&quot;&gt;Welcome to the site&lt;/p&gt;
              &lt;p&gt;
                  You can make a variety of applications, reports and requests by using our online forms.
                  For example you can apply for resident permits, report an issue or you can request a call back.
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-8&quot;&gt;
              &lt;img class=&quot;img-fluid&quot; src=&quot;~/Content/Images/city.png&quot; /&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;h2&gt;Getting started&lt;/h2&gt;
              &lt;p&gt;
                  ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                  enables a clean separation of concerns and gives you full control over markup
                  for enjoyable, agile development.
              &lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;https://go.microsoft.com/fwlink/?LinkId=301865&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;h2&gt;Get more libraries&lt;/h2&gt;
              &lt;p&gt;NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.&lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;https://go.microsoft.com/fwlink/?LinkId=301866&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;h2&gt;Web Hosting&lt;/h2&gt;
              &lt;p&gt;You can easily find a web hosting company that offers the right mix of features and price for your applications.&lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;https://go.microsoft.com/fwlink/?LinkId=301867&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I used img-fluid to see if that was the issue, but it still happens. The image eventually does stack it's just the &quot;in between&quot; size where it overlaps and is fine when the scree is full width.</p>
  <p>I haven't added any additional CSS as this is done by the addition of the img-fluid class.</p>
  <p><img src="https://i.stack.imgur.com/alkkU.png" alt="image when resized" /></p>
  <p>It may be worth adding that I have also tried setting the image to the background of the column and it does the same, suggesting there may be a problem with the column on the left rather than the image.</p>