I'm working on my website and trying to implement masonry to achieve a nice layout for my content. However, I've been encountering some strange results so far. Below is the code I'm using:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:@color"
data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
<div class="masonry-container">
<div class="contain">
<img src="@w.Image" class="image img-responsive" />
<div class="middle">
@getReferrals(w.Id)
</div>
</div>
<h4>@w.Title</h4>
<p>@w.Body</p>
</div>
</div>
It seems like the outer has the masonry functionality. I have not used jQuery because I couldn't get it to work properly, and HTML is giving me incorrect results. The current output looks like this: https://i.sstatic.net/2Pyh6.jpg
In addition, this content is within bootstrap tabs. When I tested it outside of the tabs, it worked fine but inside, it's causing issues.
If anyone could offer assistance, I would greatly appreciate it! Thank you in advance.