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/
Related
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.
Link to my project, I've been working on this project to make my portfolio, the grids of my expertise, portfolio and education block aren't aligning with respect to screen size, it remains to the left on large screen, please provide me necessary changes to be made so overcome this problem.
Ps: if I use "center" for alignment in these block, the website still doesn't work properly.
<div class="content container-fluid">
<h1 align="center">My Expertise</h1>
<div class="projects conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<i class="fa fa-code fa-3x" aria-hidden="true" align="center"></i>
<div class="id1">
<h3 align="center">CODE</h3>
<p>I'm a versatile programmer with knowledge and interest to learn and code in any language</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-desktop fa-3x" aria-hidden="true" align="center"></i>
<div class="id2">
<h3 align="center">UI/UX</h3>
<p>I'm a front-end developer and UI/UX designer who loves building and designing websites from scratch</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-cogs fa-3x" aria-hidden="true" align="center"></i>
<div class="id3">
<h3>Machine Learning</h3>
<p>I'm keenly interested in machine learning and I have implemented a project to detect Hand-written digits using python</p>
</div>
</div>
</div>
</div>
<div class="projects">
<div>
<h1 align="center">Portfolio</h1></div>
<div class="conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
</div>
</div>
<div class="conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
<div class="col-xs-4" align="center">
<img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla">
</div>
</div>
</div>
</div>
<div class="education">
<div>
<h1 align="center">My Education</h1>
</div>
<div class="projects container-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-1x" aria-hidden="true" align="center"></i>
<div class="id1">
<h3 align="center">Secondary Education</h3>
<p>Passed out secondary education with a percentage of 89.6% from ICSE board</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true" align="center"></i>
<div class="id2">
<h3 align="center">High Secondary Education</h3>
<p>Passed out higher secondary education from CBSE board with science as stream scoring 85%</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-3x" aria-hidden="true" align="center"></i>
<div class="id3">
<h3>Undergraduate</h3>
<p>Graduate from Jalpaiguri Goevrnment Engineering College with Bachelor in Information Technology with a CGPA of 8</p>
</div>
</div>
</div>
</div>
</div>
<div class="hireme" align="center">
<p>Want to get in touch with me, please fill the contact information and I'll respond as soon as possible
<p>
<button type="button" class="btn1">
<span>I'm Available for Hire</span>
</button>
</div>
<div class="mylinks" align="center">
<footer>Designed and Coded by <em>Nilabja Bhattacharya</em></footer>
<div class="icons" align="center">
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-free-code-camp" aria-hidden="true"></i>
<i class="fa fa-quora" aria-hidden="true"></i>
<i class="fa fa-codepen" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
</div>
</div>
</div>
Your .row has a max-width of 75rem. Overwrite this by:
.row {
max-width: none;
}
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;
}
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
I have seen this problem other times i worked with bootstrap and it's bugging me. When the carousel cycles the column items expand to the full width of the container ignoring their padding. How could i fix this?
<div id="shop-crsl-1" class="carousel slide shop-crsl hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns 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-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns 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-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns 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 class="item">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns 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-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns 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-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns 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>
<!-- Controls -->
<div class="controls">
<a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
<a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
</div>
</div>
.shop-crsl {
position: relative;
overflow: hidden;
}
.shop-crsl .controls a {
position: absolute;
top: 50%;
width: 100%;
line-height: 53px;
width: 50px;
border-radius: 2px;
text-align: center;
margin-top: -30px;
font-size: 11px;
height: 50px;
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-ms-transition: all 0.35s ease;
}
.shop-crsl .controls a:hover {
text-decoration: none;
}
.shop-crsl .controls .left {
left: 15px;
position: absolute;
padding-right: 3px;
}
.shop-crsl .controls .right {
right: 15px;
position: absolute;
padding-left: 3px;
}
If you nest your col-sm-4 divs in a <div class="row"> this should fix your issue. See below code:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<!-- You 1st Item -->
</div>
<div class="col-sm-4">
<!-- You 2nd Item -->
</div>
<div class="col-sm-4">
<!-- You 3rd Item -->
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<!-- You 4th Item -->
</div>
<div class="col-sm-4">
<!-- You 5th Item -->
</div>
<div class="col-sm-4">
<!-- You 6th Item -->
</div>
</div>
</div>
</div>
Now I could not duplicate your issue but I have used this method here and having the nested row helps. Let me know if you have any other questions.