Reputation: 243
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>
I don't have any css for this, only css offered by bootstrap and it shows that line there :(.
Upvotes: 1
Views: 3270
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