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
Related
I have a little problem, when a use display flex in the main container for some reason does not work.
The flex direction is always in column. I am already looking for solutions of all kinds and I can't find one that works for me. Maybe it could be a silly mistake and I'm not realizing it, I ask for help with this.
.box-container a{
color: var(--goatred-color);
}
.box-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #ccc;
}
.box{
flex: 1 1 300px;
background: #fff;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
margin: 20px;
}
.box .image{
padding: 10px;
background: #eee;
text-align: center;
}
.box .image img{
height: 200px;
width: 250px;
object-fit: cover;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
}
.box .title .info{
padding: 10px;
color: #666;
font-size: 20px;
}
.box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
}
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
Two problems:
You had one box element, I believe your intention is to have many boxes as elements which behave like rows. I added this HTML fix.
I slightly modified the padding of the content to be left aligned, see how the title of each box and the price were not left aligned.
If you agree with the solution then great. If you disagree I kindly ask you to look over the changes and try to modify it to your needs.
Note: expand the snippet to full width, you specified flex boxes 300px wide so you need to see it in a wider screen size.
.box-container a {
color: var(--goatred-color);
}
.box-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #ccc;
}
.box{
flex: 1 1 300px;
background: #fff;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
margin: 20px;
}
.box .image{
padding: 10px;
background: #eee;
text-align: center;
}
.box .image img{
height: 200px;
width: 250px;
object-fit: cover;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
}
.box .info{
padding: 10px;
color: #666;
font-size: 20px;
}
.box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="box-container">
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
</div>
I have made 4 cards using css, html and bootstrap 3. For some reason the first row doesn't have the 3 cards that i want but the second is, and they are not aligned perfectly when i zoom in(pixels difference).What can i do? You have an img down below of my 4 unaligned cards.
Here is the code :
HTML:
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
CSS:
[![> .front{
margin-top: 30%;
width: 750px;
height:750px;
background-color: #F7F4F2;
align-items: baseline;
margin-left: 20%;
position: relative;
border-radius: 10%;
align-self: flex-start;
}
.girlimg{
max-width: 500px;
min-height: 475px;
border-radius: 10%;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
position: absolute;
top:0;
right:0;
margin-left: %;
margin-top: 15%;
font-size: 30px;
}
.duration{
margin-bottom: 25%;
}
.people{
margin-bottom: 25%;
}
.kids{
margin-bottom: 25%;
}
.activname{
display: flex;
flex-direction: row;
margin-left: 7%;
margin-bottom: 5%;
font-size: 45px;
}
.activbutt{
background-color: #ffcc66;
border-radius: 2%;
display: flex;
margin-left: 20%;
font-size: 30px;
padding: 20px;
border: none;
}
Image of my 4 cards:
https://i.stack.imgur.com/6kDFU.png
I removed unwanted margins from your code. Please check this snippet.
.front {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #F7F4F2;
position: relative;
margin-bottom: 15px;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.activname{
font-size: 20px;
}
.activbutt{
background-color: #ffcc66;
text-align: center;
padding: 10px;
border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12"></div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
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 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 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.