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.
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.
I currently have this kind of display for each record.
So per record I have two boxes which is Afternoon and Night. As you can see I am displaying each record horizontally with this code for reference:
<div id="record_box">
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
</div>
So each record is this inside this block
<div class="row" style="padding-left: 10px; padding-right: 10px;">
But my what if I want to display each record vertically? In a grid, 12 is the max size right? I have a fixed maximum number records that I need to display, and it's only 4. So I can make each record like col-3. What I mean also by vertical is if I have 1 record, Afternoon is on top, then night is bottom. Then the right will be blank. Like this:
I have create basic structure for you, now you can make necesssary changes in it.
css :
.panel-box {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.panel-box .panel-heading {
padding: 20px 10px;border: 1px solid rgba(86,61,124,.2);
}
.panel-box .panel-heading .fa {
margin-top: 10px;
font-size: 58px;
}
.panel-box .list-group-item {
color: #777777;
border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-box .panel-body {
font-size: 20px;
color: #777777;
padding: 20px;
margin: 0px;border: 1px solid rgba(86,61,124,.2);
}
HTML :
<div class="container">
<div class="row">
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
This will generate structure like below image:
I want to draw 2 divs like the one shown in the below wireframe example. The latter one (black bar) being empty of content. How would I draw these 2 divs using Bootstrap 4?
Following is my effort at this:
<div class="icons_div">
<div class="row">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div> <br> <br>
Following is my re-tried code after Web Dev's Comments:
CSS:
.icon-bar
{
width: 100%;
background-color: black;
overflow: auto;
align-items: center;
}
.icon-bar a
{
float: left;
text-align: center;
width: 20%;
padding: 12px 0;
transition: all;
color: white;
font-size: 36px;
}
.icon-bar a:hover
{
background-color: #000;
}
.active
{
background-color: #4CAF50;
}
.icons_div
{
margin: 0px auto;
width: max-content;
}
.icon
{
margin: 0px auto;
width: 15px;
display: initial;
}
.fa
{
padding: 0px 10px;
}
HTML:
<div class="container-fluid">
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div>
<div class="row">
<div class="col bg-dark" style="height: 40px;"></div>
</div>
</div> <br> <br>
Wireframe of divs
Output from Retry:
In that case, you just add the bg-secondary class to the first row to give it the grey background color and then create a second row-column pair underneath and add the bg-dark to the empty column there as well as style="height: 40px;" to give it the desired height.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div>
<div class="row">
<div class="col bg-dark" style="height: 40px;"></div>
</div>
</div>
I have the following icon-div. What I want is to align the elements in the middle of the div like shown in the wireframe. What shall I do to make this happen.
HTML:
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-search"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-home"> </i> </div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-trash"> </i> </div>
</div>
</div>
</div>
CSS:
.icons_div
{
margin: 0px auto;
width: content;
overflow: visible;
}
.icon
{
margin: 0px auto;
width: 15px;
display: table-cell;
}
.fa
{
padding: 0px 10px;
}
Following are my wireframe and my output respectively:
use bootstraps flexbox: https://getbootstrap.com/docs/4.0/utilities/flex/
with
<div class="d-flex justify-content-around">
<div class="icon"><i class="fa fa-circle"> </i></div>
<div class="icon"><i class="fa fa-globe"> </i> </div>
...
</div>
you can justify them with "margins" left and right
if you want to put this more into the center, you can set a margin on the flex container or around it
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/