CODEWITHSUNDEEP
htmltwitter-bootstrap-3
C.Radford
C.Radford

Reputation: 932

Bootstrap 3.4 Grid layout issues when using images

I am following a bootstrap tutorial making a simple photo gallery. Using the grid systems makes total sense to me but when I follow the tutorial I am getting diverging results. There should be 9 images in a 3x3 grid but for some reason, certain images are being "pushed/pulled" out of place. Thanks for your help.

Code:

<div class="container"> 
    <div class="row">   
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596877098462-fd1cfc6482c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1587712606457-20d42e24300e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>        
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>        
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>        
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>        
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>        
            <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div>
    </div>

</div>

enter image description here

Upvotes: 0

Views: 77

Answers (1)

Arushi Rai
Arushi Rai

Reputation: 46

The most probable reason for this is that you have forgotten to add the link to the Bootstrap CDN in your code.

<head>
    <meta charset="utf-8">
    <title>TRIALS</title>
    <link rel="stylesheet" href="master.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>

This link is for Bootstrap 4.5 but you can get the link to your version here

Upvotes: 2

Related Questions