Bootstrap columns squished - html

I need some help, or advice rather. I've been working on creating a really basic recruitment portal for my employer. However it would seem like I'm not setting up the bootstrap scaffolding correctly as the columns seem to be very 'squashed' together when looking at it from a smaller device.
What is confusing me is the fact that I've used xs columns, which I would have assumed would take smaller devices into consideration and as such would adjust the width's of the columns accordingly...
I'd really appreciate it if someone could either tell me what I'm doing wrong or show me how to fix it to make it more responsive.
Here is a pen to a working example and below are the columns (without headers):
<div class="row buffer-top">
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>


Try below code and see Bootply Demo
You can add col-lg-3 col-md-3 col-sm-6 col-xs-12
col-lg-3 for large device,
col-md-3 for medium device,
col-sm-6 for small-medium device,
col-xs-12 for mobile device
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle one">
<div class="table-row"> <span>Site Access </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
<div class="circle two">
<div class="table-row"> <span>Developers</span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle three">
<div class="table-row"> <span>Head Office </span> </div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="circle four">
<div class="table-row"> <span>Consultants </span> </div>
</div>
</div>
</div>
<div class="row buffer-top">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>
</div>


col-xs-* classes will persist the layout in smaller widths. You need to use col-sm-* classes. They will break at 767px, so that in smaller devices there will be enough space to show the whole div horizontally.


You can divide it in groups of two, for smaller screens and I guess it looks better without the offset (you could need to adjust your CSS code I guess, since I've seen some margins there): http://codepen.io/denea/pen/EgNprZ
<div class="row buffer-top">
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p>More infoApply</p>
</div>
</div>
</div>
</div>
And for CSS:
.thumbnail {
margin: 0 auto 20px auto;
width: 200px;
height: 350px;
border: 2px solid black;
}

Related

How to exclude part of the code with TWIG?

I have a Drupal 8 TWIG file with this code :
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i> {{ product.flag_like_product }}
</div>
Is it possible to exclude the following code :
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
Here is the rendering of the code :
<div class="row p-0 m-0">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-heart fa-lg"></i>
<div class="bs-field-like-link">
<div class="flag flag-like-product js-flag-like-product-14 action-flag">
<a title="" href="/fr/flag/details/flag/like_product/14?destination=/fr/boutique/exemple-dune-boutique" class="use-ajax" data-dialog-type="modal" data-dialog-options="{"width":"auto"}" rel="nofollow">
<span class="btn btn-outline-success btn-sm">
<i class="far fa-heart fa-lg"></i> J'aime
</span>
</a>
</div>
</div>
<span class="bs-field-like-count">
1
</span>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="far fa-comment fa-lg"></i> 0
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0 text-center">
<i class="fas fa-share-alt fa-lg"></i> 0
</div>
</div>

Bootstrap row messing up

HTML
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-2"></div>
<div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
<p class="efr">Create</p>
<i class="fas fa-plus fa-2x" id="ci"></i>
</div>
<div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
<p class="efr">Add</p>
<i class="fas fa-address-book fa-2x" id="ai"></i>
</div>
<div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
<p class="efr">Statistics</p>
<i class="fas fa-chart-pie fa-2x" id="si"></i>
</div>
<div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
<p class="efr">Export</p>
<i class="fas fa-file-export fa-2x" id="ei"></i>
</div>
</div>
<div class="row" id="bigger">
<div class="col-2" id=""></div>
<div id="created" class="dropdown col-4">
<h2>CREATE</h2>
<p>as many sheets as you want with ease!</p>
</div>
<div id="addd" class="dropdown col-4">
</div>
<div id="statsd" class="dropdown col-4">
</div>
<div id="exportd" class="dropdown col-4">
</div>
</div>
</div>
</div>
CSS
height:70px !important;
width:700px;
margin-left:47px
}
If I make the "height" any more than 70 the rest of the row goes to the start of the jumbotron
When height is less than 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694
When height is more than 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03
I'm really not sure what to do.

Change format from one column to two columns

<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
<br><br><br>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>
</div>
</div>
</div>
</div>
It looks like Image 1
How can I make it look like image 2 but with 2 columns, because mine is all stuck with eachother:

First, you can't have more than 12 col by row, so your code is wrong.
Second, please, don't use the "I'll put every class and it'll work" as suggested by my fellow, Bootstrap work on a cascade way, you just have to set on the "until the smallest screen" you want.
If you want 2 col even in xs-, then just use the col-xs-6, no need to set the sm- / md- / lg-.
And last, I don't really understand what you want, this ?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
</div>
<div class="row">
<div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6"><i class="fa fa-2x" aria-hidden="true"></i><br></div>
</div>
</div>
</div>
</div>

In bootstrap, .col-md- class is used for medium screens, .col-xs- means extra small and col-sm for small screens
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later
<br>
<i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?
<br>
<i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!
</div>
</div>
</div>
</div>
</div>

Bootstrap slider doesn't work

I downloaded html and css codes from bootstrap then run it on my local server but the slider function doesn't work. The screen just dropped below when I click the arrow. I don't know why it doesn't work in spite of just copied the codes below from bootstrap.
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-9">
<h3>
Carousel Product Cart Slider</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product Example</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Next Sample Product</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Grouped Product</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css codes
/* carousel */
.media-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -12px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -12px !important;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.media-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */

Please add the following css and scripts in your solution and hope it would be work.
In head section scripts links
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
have look in snippet, It will work proper in full page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-9">
<h3>
Carousel Product Cart Slider</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product Example</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Next Sample Product</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Sample Product</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Grouped Product</h5>
<h5 class="price-text-color">
$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>
Product with Variants</h5>
<h5 class="price-text-color">
$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jsfiddle links
https://jsfiddle.net/6y3za13j/

Creating two columns grid layout in Bootstrap

I'm trying to create two columns grid like the following image:
To achieve it, I've written the 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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</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">Title</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>
Read more
</div>
</div>
</div>
.content-summary {
margin-bottom: 10px;
margin-top: 10px;
position: relative;
}
The result of above code is usually as the following image:
Am I in correct way? What's wrong with my 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 this code 2 column will be manage now you have to add style to each box