Darius
Darius

Reputation: 243

Horizontal line between first and second bootstrap rows

I'm using bootstrap rows to make 3 columns with buttons but when I make them, it showing a horizontal line that separates first column from second one. The problem is that I don`t want that line there and it only shows between first column and second one.

How can I take that annoying line off ?

Here is my code and a photo:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1">  
            <h5>Noise pollution</h5>
        </div>
        <div class="col-sm-1">  
            <h5>Waste pollution</h5>
        </div>
        <div class="col-sm-1">  
            <h5>Chimic pollution</h5>
        </div>
    </div>
    </div>

enter image description here

I don't have any css for this, only css offered by bootstrap and it shows that line there :(.

Upvotes: 1

Views: 3270

Answers (1)

abhijeetwebdev
abhijeetwebdev

Reputation: 396

You can find the CSS which applies this styling in the inspector of the developer tool. Still, if you are unable to locate you can overwrite the CSS to remove borders. Try adding below code snippet at the end of your CSS file,

.container-fluid .row .col-sm-1 {
    border: none;
}

Upvotes: 1

Related Questions