I am newbie in CSS and Bootstrap and was trying to create a image gallery using Bootstrap Grid In which I am using One row class and under which i am using col-lg-4 class for 3 columns in the container and if i am using 2 separate rows then the grid is working as i want.
but if i am using only one row class then the first 3 images are arranged properly as i want and if i am adding the fourth image in the same row then the image should automatically move into the second row and it is moving in second row too but in the second column not the first. Due to this reason the images are not correctly positioned. Any one can explain? and tell me what i am doing wrong?
below is the html code.
body {
font-family: "Bebas Neue";
}
.navbar-brand {
letter-spacing: 2px;
}
.nav {
letter-spacing: 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Linking Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!-- LINKING JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- Linking Bootstrap JAVASCRIPT -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet"/>
<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>Image Gallery</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-nav-demo"
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>
<a href="#" class="navbar-brand"><strong>J.Photography</strong></a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>The Image gallery</h1>
<p>A bunch of beautiful Pictures from Around the Globe!</p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025kkXelCOx.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025Oq0YQLZZ.jpg"
alt=""
/>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img
src="https://d37b3blifa5mva.cloudfront.net/000_clients/1431025/page/1431025u5zYFC6n.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
</body>
</html>
