Have border on inside of bootstrap columns only - html

Question

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:
However, when the screen is re-sized to 768px (xs) it looks like
.
What can I do to make it have borders only on the inside of the columns?

Answer 1

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

Answer 2

If you want it dynamic with less css code, try this out
.border{
padding: 40px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*xs*/
#media(max-width:767px){
.border{
border-right: none;
}
}
/*sm*/
#media(max-width:991px){
.border:nth-child(2n){
border-right: none;
}
}
/*md*/
#media(min-width:992px){
.border:nth-child(4n){
border-right: none;
}
}
Check Demo Here https://jsfiddle.net/adratarek/q8kec8xb/4/

Answer 3

Invalid usage of Id #border. ID can not repet as per HTML rules.
You should use class if you want to use it multiple times.
HTML
<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>
CSS
#skills .border {
border-right: 1px solid #ddd;
}
Demo
EDIT:
According to your need (as you specified in comment).
HTML
<div class="row">
<div class="col-md-3 col-xs-6 border-right" >
<i class="fa fa-terminal"></i>
<br>
Linux
</div>
<div class="col-md-3 col-xs-6 " >
<i class="fa fa-html5"></i>
<br>
HTML5
</div>
<div class="col-md-3 col-xs-6 border-top border-right">
<i class="fa fa-cogs"></i>
<br>
Teamwork
</div>
<div class="col-md-3 col-xs-6 border-top">
<i class="fa fa-bullhorn"></i>
<br>
Communication
</div>
</div>
CSS
#skills .border-right {
border-right: 1px solid #ddd;
}
#skills .border-top {
border-top: 1px solid #ddd;
}
Demo

Answer 4

Okay, fixed this with some media queries jsfiddle
Media query is
#media (min-width: 992px) {
#skills .border-right-md {
border-right: 1px solid #ddd;
}
#skills .border-top {
border-top: none;
}
}