Bootstrap well's

by Torwan

HTML

<h1>Masonry CSS with Bootstrap</h1>
<div class="container">
	<div class="row">
		<div class="item">
			 1 blah blah blah
		</div>
		<div class="item">
			 2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
		</div>
		<div class="item">
			 3 blah blah blah blah blah blah blah blah h 3 blah blah blah blah blah blah blah blah h  3 blah blah blah blah blah blah blah blah h 3 blah blah blah blah blah blah blah blah h  3 blah blah blah blah blah blah blah blah h 3 blah blah blah blah blah blah blah blah h  
		</div>
		<div class="item">
			 4 blah blah blah blah
		</div>
		<div class="item">
			 5 blah blah blah. The container inside the item must be position:relative
		</div>
		<div class="item">
			 6 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
		</div>
		<div class="item">
			 7 blah blah blah blah blah blah blah blah h blah blah blah blah blah blah blah blah h
		</div>
		<div class="item">
			 8 blah blah blah blah
		</div>
		<div class="item">
			 9 blah blah blah blah blah blah blah blah blah blah blah blah
		</div>
		<div class="item">
			 10 blah blah blah. The container inside the item must be position:relative
		</div>
	</div>
</div>

CSS

*, *:before, *:after {box-sizing:  border-box;}


.row {
 -moz-column-width: 310px;
 -webkit-column-width: 410px;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
  
}

.item {
 display: inline-block;
 padding:  5px;
 width:  100%; 
 background: #dadada;
 border:1px solid #333;
 margin:5px 0px;
}