bootstrap border on md and above?

Question

Is there anyway in bootstrap or CSS to make it so my columns only have a border when on a medium device or above?

Or even have a different border for small devices compared to medium and above?

For example if I have:

<div class="container"> 
  <div class="row">
    <div class="col-md-12">
       stuff
    </div>
  </div>
 </div>

How can I tell the column of class col-md-12 to have a different border on smaller devices than on larger devices?

Answer 1

write you css in media queries according to your requirement.

 /* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Answer 2

You could use some jQuery like :

$(window).resize(function() {
  if($(window).width() <= 900) {
     $('.col-md-12').css('border','none');
  }
 });