"3 column"
Bootstrap 3.3.0 Snippet by phplaw

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3>Error when the row bellow is on sm screen</h3> <div class="row"> <div class="col-test col-md-4 col-sm-6"> <h3>Small text, col-md-4 col-sm-6</h3></div> <div class="col-test col-md-4 col-sm-6"> <h3>Small text, col-md-4 col-sm-6</h3></div> <div class="col-test col-md-4 col-sm-6"> <h3>Long text, col-md-4 col-sm-6</h3> <p> Cột này sẽ bị rớt xuống dòng mới. và bên phải sẽ xuất hiện một cột trống vì cột này có độ rộng = 6 trên small screen. </p> </div> </div> <h2>Right way to format this</h2> <hr> <div class="row"> <div class="article col-md-4 col-sm-6 col-xs-12"> <!-- content do not mind about this --> <img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive"> <div class="content"> <h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3> <p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span> </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a class="cap" href="#">Dresses</a> <span> </span> Discover <a class="cap" href="#">White Themes</a> </div> </div> <!-- /end content --> </div> <div class="article col-md-4 col-sm-6 col-xs-12"> <!-- content do not mind about this --> <img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive"> <div class="content"> <h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3> <p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span> </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a class="cap" href="#">Dresses</a> <span> </span> Discover <a class="cap" href="#">White Themes</a> </div> </div> <!-- /end content --> </div> <!-- /end col --> <!-- larger text --> <div class="article col-md-4 col-sm-6 col-xs-12"> <h3><a href="article-page.html clickable">This is a very long article</a></h3> <a href="article-page.html" target="_blank"> <p class="intro clickable text-preset">Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made </p> </a> <hr> <div class="article-meta"> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span>   </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a href="#" class="cap">Dresses</a> <span>   </span> Discover <a href="#" class="cap">White Themes</a> </div> </div> <!-- / end article-meta --> </div> <!-- next line --> <div class="article col-md-4 col-sm-6 col-xs-12"> <!-- content do not mind about this --> <img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive"> <div class="content"> <h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3> <p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span> </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a class="cap" href="#">Dresses</a> <span> </span> Discover <a class="cap" href="#">White Themes</a> </div> </div> <!-- /end content --> </div> <div class="article col-md-4 col-sm-6 col-xs-12"> <!-- content do not mind about this --> <img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive"> <div class="content"> <h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3> <p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span> </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a class="cap" href="#">Dresses</a> <span> </span> Discover <a class="cap" href="#">White Themes</a> </div> </div> <!-- /end content --> </div> <!-- /end col --> <!-- larger text --> <div class="article col-md-4 col-sm-6 col-xs-12"> <h3><a href="article-page.html clickable">This is a very long article</a></h3> <a href="article-page.html" target="_blank"> <p class="intro clickable text-preset"> Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made </p> </a> <hr> <div class="article-meta"> <div class="feed-action"> <a href="#"><span class="like-count">80</span> Likes</a> <span>   </span> <a href="#"><span class="comment-count">3</span> Comments</a> </div> <div class="tags"> From <a href="#" class="cap">Dresses</a> <span>   </span> Discover <a href="#" class="cap">White Themes</a> </div> </div> <!-- / end article-meta --> </div> <!-- next line --> </div> <!-- /end row --> </div> <!-- / end container -->
div.container { margin-top: 10px; } a, a:hover, a:active { color:#e46c73; } a p.intro { color: #181816; } div.article { /* we need this to keep the article block has the same height */ min-height: 400px; } div.article h3 { margin:0 10px 10px 0; } div.col-test { border: 1px solid green; }

Related: See More


Questions / Comments: