title: Hide images on small sized screens using Bootstrap
body: <p>i have the following markup, which uses bootstrap 4, to show text and images, as follow:-</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xl-12"&gt;
              &lt;img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-block" /&gt;
              &lt;p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;"&gt;.... &lt;/p&gt;
              &lt;p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;"&gt;....&lt;/p&gt;
  
              &lt;img src="~/img/img2.png" class="mx-auto d-block" /&gt;
  
              &lt;p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;"&gt;....&lt;/p&gt;
              &lt;p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;"&gt;..../p&gt;
  
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>now i want to hide the 2 images on small sized screens and keep the text only, so how i can do so using bootstrap 4? thanks</p>