I am working on a Bootstrap 4 project.
For one of the pages, I am trying to put together a masonry layout width pictures most of which have a certain width, some of which have twice that width.
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 200
});html,
body {
padding: 0;
margin: 0;
height: 100%;
}
html {
font-size: 14px;
}
.page-wrapper {
min-height: 100%;
}
a.inherit {
color: inherit;
}
a.nounderline,
a.nounderlie:hover {
text-decoration: none;
}
.navbar-nav {
margin-left: auto;
}
.navbar-nav li {
padding: 0 4px;
}
.navbar-nav li a {
font-size: 20px;
color: #fff;
font-weight: 500;
text-transform: lowercase;
}
.navbar-nav li.active a {
text-decoration: underline;
}
.navbar-nav.black-text a {
color: #000;
}
.masonry-layout {
margin-top: 5rem;
}
.masonry-layout img {
display: block;
margin: 0 auto;
}
.masonry-layout .grid-item:nth-child(odd) {
float: right;
}
.site-footer {
color: #7E7E7E;
}
.site-footer a {
color: inherit;
text-decoration: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>
<nav class="navbar fixed-top navbar-expand-lg navbar-default">
<a class="navbar-brand white" href="index.html">
Logo
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav black-text">
<li class="nav-item">
<a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Culture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="page-wrapper">
<div class="container grid masonry-layout">
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
<div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
<footer class="site-footer container-fluid clearfix">
<div class="row">
<div class="col-md-6">
<p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
</div>
<div class="col-md-6">
<p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
</div>
</div>
</footer>
</div>The small images are all on the right column. I thought this could be because the bootstrap columns are floated left. So I added float: right; to every odd item.
The situation did not improve. Where am I wrong?
