1

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?

Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252

2 Answers2

0

Columns always need to be placed in a .row, remove the columnWidth: 200. Set 100% width on the images so they don't overflow their container.

$('.row').masonry({
  itemSelector: '.grid-item'
});
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;
  width: 100%;
}

.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="row">
    <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>
  </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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • The question of "items are displayed in a left column only" has been addressed. You'll need to play with it more to get the layout you want. – Carol Skelly Jun 21 '18 at 17:20
  • There is a 100 reputation BOUNTY for **[this question](https://stackoverflow.com/questions/51894403/prevent-event-overlap-in-custom-jquery-image-carousel)**. Interested? :) – Razvan Zamfir Aug 30 '18 at 09:27
0

Masonry need to know the column width to place the items in the correct position so you just need to add an empty div at the top of the items with the class .div-sizer

<div class="div-sizer col-xs-12 col-sm-6"></div>

You can refer to the codepen created by the library developer

Ibtekarlabs
  • 33
  • 5