Thomas Carroll Thomas Carroll - 3 months ago 5
CSS Question

Have border on inside of bootstrap columns only

I have a set of four coloumns like so:

<div class="container-fluid" id="skills">
<div class="row">
<div class="col-md-3 col-xs-6 border">
<i class="fa fa-terminal"></i>
<br>
Linux
</div>
<div class="col-md-3 col-xs-6 border">
<i class="fa fa-html5"></i>
<br>
HTML5
</div>
<div class="col-md-3 col-xs-6 border">
<i class="fa fa-cogs"></i>
<br>
Teamwork
</div>
<div class="col-md-3 col-xs-6">
<i class="fa fa-bullhorn"></i>
<br>
Communication
</div>
</div>
</div>


CSS is:

#skills #border {
border-right: 1px solid #ddd;
}


This produces: this

However, when the screen is re-sized to 768px (xs) it looks like this.

What can I do to make it have borders only on the inside of the columns?

Answer

if you want to have less class names and be able to use it for more than 4 items you can use this.

#skills .border:not(:first-child){
    border-left: 1px solid #ddd;
}
@media (max-width: 992px){
    #skills .border:nth-child(odd){
        border-left: none;
    }
    #skills .border:nth-child(n+3){
        border-top: 1px solid #ddd;
    }
}

html:

<div id="skills" class="row">
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-terminal"></i>
        <br>
        Linux
    </div>
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-html5"></i>
        <br>
        HTML5
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-cogs"></i>
        <br>
        Teamwork
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-bullhorn"></i>
        <br>
        Communication
    </div>
</div>

Fiddle

Comments