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

November 11, 2022 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>
<html lang="en">
    <head>
        <title>Index Page</title>
        <link  href="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>
        <div class="col-md-6">
            <p>First div</p>
        </div>

        <div class="custom-border-left col-md-6">
            <p>Second div</p>
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="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:

@media only 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.

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

Learn Html5