Hide Or Remove Left Border When Collapsing To Small Screen Using Bootstrap

October 07, 2024 Post a Comment

I have 2 divs that collapse nicely into one long column when phone size is reached. I added a left blue border to the second div which creates a really nice vertical devider betwe

Solution 1:

use this @media

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

Solution 2:

.col-md- class as per [bootstrap] (http://getbootstrap.com/css/#grid-options) will apply for width >= 992px.

You can also try experimenting with other classes like .col-xs- .col-sm- .col-lg-

here is a sample code. hope it helps...

<!DOCTYPE html><htmllang="en"><head><title>Index Page</title><linkhref="bootstrap/css/bootstrap.min.css"><!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]--><style>@media screen and (min-width: 992px) {
            .custom-border-left {
                border-left: 2px solid royalblue;
            }
        }
        </style></head><body><divclass="col-md-6"><p>First div</p></div><divclass="custom-border-left col-md-6"><p>Second div</p></div><scriptsrc="js/jquery.min.js"></script><scriptsrc="bootstrap/js/bootstrap.min.js"></script><script>
        $(document).ready(function(){
            //js code in here
        });
        </script></body></html>

Solution 3:

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

Solution 4:

Simply write a media query and put your conditional styles inside of it. For example:

@mediaonly screen and (max-width: 767px) {
  .border {
    border-left: none;
  }
}

Solution 5:

Create a new stylenew.css file & paste this css below into that and attach like this <link href="stylenew.css" rel="stylesheet"> into your html in <head> tag.

@mediaonly screen and (min-width:0px) and (max-width:767px){
  .border{
    border: 0 solid !important
  }
}

Html5 Tech