problem with a bootstrap grid

Navigation
1

I'mnotabletogetthatseparationnexttothecartadd.

htmlcode:

<divclass="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 using bootstrap 4.1.3

    
asked by anonymous 02.10.2018 / 01:27

1 answer

1

To strip this line that makes it separate just remove the class from this class of the element. I left only the last element so you can visualize with and without the border 

.col-item .btn-add
{
    border-right: 1px solid #E1E1E1;
}

See how it gets after you remove it from the 

.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
{
    /* bastar tirar essa borda */
     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;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    
    <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=" 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=" 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=" 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>
    
02.10.2018 / 01:45
Use the data of a request in a global variable MVC in C #, separate by folders or class library? [closed]