Now, we have three columns, so we need an image inside there and then also text underneath the images. Now as far as the images go, you should have those in your project files. So, I have added some black and white images and they're named 1.jpg through 6.jpg as shown here:

Let's go back to our code editor and add the <image> tag. We'll point to each one, so add src and then that's going to go to images/1.jpg. We'll also have a paragraph underneath with some sample text as shown here:

<div class="w3-row">
  <div class="w3-col m4 l4">
    <img src="images/1.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>

We'll need to do this for all of our columns as shown here:

<div class="w3-row">
  <div class="w3-col m4 l4">
    <img src="images/1.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
  <div class="w3-col m4 l4">
    <img src="images/2.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
  <div class="w3-col m4 l4">
    <img src="images/3.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
</div>

We'll save it, reload our page, and can see the images as follows:

Now we need to set the width of these images to a 100% of their container because as shown in the preceding screenshot, they're busting out of their container. So in the style.css sheet, we'll add the image and set width to 100%:

img{
  width:100%;
}

If we go and reload our page, we'll see the following:

These are all fit nice and neat. In order for us to get more images, we have to put in some more rows. In the index.html file, copy the three divs we have defined and just put that right underneath the previously added <img> tags. We'll then change the image source filenames to 4.jpg, 5.jpg, and 6.jpg. We also want to center the text underneath the images as well. So in each <div> tag, we'll also going to add a class of pic, so that each picture div has its own class as shown here:

<div class="w3-col m4 l4 pic">
  <img src="images/4.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>
<div class="w3-col m4 l4 pic">
  <img src="images/5.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>
<div class="w3-col m4 l4 pic">
  <img src="images/6.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>

Now, in the style.css, we'll add .pic and text-align: center, as shown in this code, so that the text below the images look aligned:

.pic{
  text-align: center;
}

If we now go and reload our page, we can see in the following screenshot that we have six images and our text is aligned: