Straight to the point...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="galary.css"><link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css"><title>image galary</title></head><body><!-- Nav head bar --><nav class="navbar navbar-default darkblue"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><div class="container"><div class="navbar-header"><a href="#" class="navbar-brand"> IMGS</a></div><div class="collapse navbar-collapse" id="buttoncollapse"><ul class="nav navbar-nav"><li> <a href="#"> About us </a> </li><li> <a href="#"> contact </a> </li></ul><ul class="nav navbar-nav navbar-right"><li> <a href="#">Log in</a> </li><li> <a href="#"> Sign up</a></li></ul></div></div></nav><Div class="container"><div class="jumbotron"><h1>The Image Gallery</h1><p>A bunch of beautiful images </p></div></Div><div class="container"><div class="row"><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="http://i.imgur.com/qK42fUu.jpg"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div></div><div class="row"><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div></div><div class="row"><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1456"></div></div></div></div><script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script><script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>In the code above every row has 3 pictures and each row I have implemented the div class "row" however when reaching the small size each row does not take 6 columns. The first row has two pictures of 6 columns, however, the second row has one picture of 6 columns. This happens repeatedly with the 3rd row having 2 pictures of 6 columns and the 4th row have 1 picture of 6 columns.
However, when taking away the row class for each row it works perfectly fine??
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script><link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container"><div class="row"><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="http://i.imgur.com/qK42fUu.jpg"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div></div><div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"><div class="thumbnail"><img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1456"></div></div></div>If someone could enlighten me that would be great.
Thanks all