move row of divs down when overflow - html

Question

I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<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="">&#9658</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.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;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row

Answer 1

I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<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="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<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="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<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="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>

Answer 2

I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.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;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.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;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>