title: How to increase the size of an image in 6 column class
body: <p>I am unable to stretch the image to full width till right corner. it should be responsive. My code is integrated in wordpress. You can see the image in class membershipImgBox. So How can I increase the size of my image.</p>
  <p>The code as follows.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.membershipbox {
    height: 100%;
  }
  
  .img-fluid {
    max-width: 100%;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com"&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&amp;display=swap" rel="stylesheet"&gt;
    &lt;!-- Bootstrap CSS --&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;!-- for icons --&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" /&gt;
  &lt;/head&gt;
  &lt;section class="deliveringSection "&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"&gt;
          &lt;div id="img-2" class="membershipImgBox"&gt;
            &lt;img src="https://via.placeholder.com/987/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"&gt;
          &lt;div class="deliveringContent"&gt;
            &lt;div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"&gt;
              &lt;h2&gt;
                Delivering quality projects to
              &lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000"&gt;
              &lt;h2&gt;&lt;b&gt;World Class &lt;/b&gt;&lt;/h2&gt;
              &lt;h2&gt;Standards&lt;/h2&gt;
              &lt;div class="about-border"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;p&gt;We work around three important elements of our business to create world-class innovative interior design solutions to meet our clients’ functional &amp; aesthetic requirements providing unique tailored space solutions. We integrate the client’s
              brand and business strategy, placing great emphasis on the brand’s values and aspirations to bring projects to fruition, taking our strong working relationship to the next level..​​&lt;/p&gt;
            &lt;a href="" class="btn btn-primary btnWeight"&gt; about us &lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>