html5 - Creating two columns grid layout in Bootstrap -
i'm trying create 2 columns grid following image:
to achieve it, i've written following code:
<div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary"> <a href="#" class="center-block text-center"> <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=title" alt="title" /> </a> <h2 class="text-justify"><a href="#">title</a></h2> <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">summary of content</p> <div class="row text-right"> <span class="fa fa-image fa-lg"></span> 12 images <span class="fa fa-file-movie-o fa-lg"></span> 2 videos <span class="fa fa-file-audio-o fa-lg"></span> 1 audio <span class="fa fa-download fa-lg"></span> 3 downloads <span class="fa fa-comments-o fa-lg"></span> 18 comments <div class="clear-fix"></div> <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">read more</a> </div> </div> </div> .content-summary { margin-bottom: 10px; margin-top: 10px; position: relative; } the result of above code following image:
am in correct way? what's wrong code?
<div class="container"> <div class="row"> <div class="col-lg-1"> col-lg-1 </div> <div class="col-lg-1"> col-lg-2 </div> </div> <div class="row"> <div class="col-lg-1"> col-lg-1 </div> <div class="col-lg-1"> col-lg-2 </div> </div> <div class="row"> <div class="col-lg-1"> col-lg-1 </div> <div class="col-lg-1"> col-lg-2 </div> </div> <div class="row"> <div class="col-lg-1"> col-lg-1 </div> <div class="col-lg-1"> col-lg-2 </div> </div> </div> using code 2 column manage have add style each box
Comments
Post a Comment