1
I’m not getting to take away this separation that’s next to the add cart.
html code:
<div class="container">
<div class="row">
<div class="item">
<div class="row">
<div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-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-12">
<h5 class="text-center mb-2">
Produto 1</h5>
<h5 class="price-text-color text-center mb-3">
R$199.99</h5>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add mt-4 ml-5">
<i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-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-12">
<h5 class="text-center mb-2">
Produto 1</h5>
<h5 class="price-text-color text-center mb-3">
R$199.99</h5>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add mt-4 ml-5">
<i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-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-12">
<h5 class="text-center mb-2">
Produto 1</h5>
<h5 class="price-text-color text-center mb-3">
R$199.99</h5>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add mt-4 ml-5">
<i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-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-12">
<h5 class="text-center mb-2">
Produto 1</h5>
<h5 class="price-text-color text-center mb-3">
R$199.99</h5>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add mt-4 ml-5">
<i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.col-item
{
border: 1px solid #E1E1E1;
border-radius: 5px;
background: #FFF;
}
.col-item .photo img
{
margin: 0 auto;
width: 100%;
}
.col-item .info
{
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.col-item:hover .info {
background-color: #F5F5DC;
}
.col-item .price
{
/*width: 50%;*/
float: left;
margin-top: 5px;
}
.col-item .price h5
{
line-height: 20px;
margin: 0;
}
.price-text-color
{
color: #219FD1;
}
.col-item .separator
{
border-top: 1px solid #E1E1E1;
}
.clear-left
{
clear: left;
}
.col-item .btn-add
{
width: 50%;
float: left;
}
.col-item .btn-add
{
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details
{
width: 50%;
float: left;
padding-left: 10px;
}
.controls
{
margin-top: 20px;
}
[data-slide="prev"]
{
margin-right: 10px;
}
I’m wearing bootstrap 4.1.3
Left or right bank?
– hugocsl
the one on the right is this separation next to the add cart text.
– Felipe
ah e @hugocsl valeu I searched a lot about this business of grid and I managed to understand right mt thanks even for the tip, it is essential.
– Felipe
Boy is VERY important yes, and it is not complicated, just watch some video that has around that people explain almost everything. To work with these frameworks you have to know how their Grid works, it is the key point to mount the layout in the right way! I’m glad it served as a source of study :)
– hugocsl