Twitter Bootstrap Question posted in

Central align masonry grid-Twitter bootstrap

I am trying to do 2 things:

  1. Make masonry grid 100% width and central align elements
  2. Use bootstrap visibility classes to show/hide certain elements

I did the code like so:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5,
  fitWidth: true
});
.grid-item{
  margin: 0 auto 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item"><img src="https://via.placeholder.com/500x150" alt=""></div>
  <div class="grid-item d-lg-block d-none"><img src="https://via.placeholder.com/1000x150" alt=""></div>
</div>

I am using fitWidth: true but the grid container is fixed width.

What am I doing wrong?

Tags:

2

Answers


  1. 0

    the Masonry setting is isFitWidth: true,

    $('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  gutter: 5, 
  isFitWidth: true,
});

    Masonry’s Codepen example

    Login or Signup to reply.
  2. 0

    You will want to center the entire .grid using the Bootstrap mx-auto class…

    <div class="grid mx-auto">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item">...</div>
</div>

    https://codeply.com/p/kHGkGI4s11

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search