I have a website with dynamic div boxes, and I want to organize them into rows with 4 boxes each using Bootstrap. It's working fine, but the issue arises when the text in a box is too long and creates a new line. Instead of moving down to accommodate the longer text, the box next to it moves to the right. Here is the HTML code:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And here is the CSS code I'm using:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Essentially, I need the row below the one with overflowing text to move down instead of pushing elements to the right. The issue seems to be related to the "album-art" class. Even after removing other classes, the problem persists.
Thank you for your assistance.
EDIT: Added images for clarification:
When everything looks normal:
But becomes an issue with longer text:
EDIT2: Created an example on jsfiddle.net/qgo7a701. You may need to expand the result area to the left to see 4 squares per row.