Geek Answers Handbook

How to hide one column from the grid in the boot version

It seems to me that it's a little complicated, that I want to hide one column from the grid in the boot version of bootstrap. Let's show an example

<div class="row"> <div class="col-xs-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div> </div>

Above coding, I hide part of the image when viewed by a mobile device. I want me to not want the gap of the image part to be hidden, since increasing the left part to reach to the right side.

+14
source share
4 answers

Since you are hiding the second column in "xs", you can use the full width for the first column by specifying the class "col-xs-12" in column1.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9"> <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p> </div> <div class="col-sm-3 center-image hidden-xs"><img src="myimage.png"/></div> </div>
+24
source

What you need to use is media queries.

Here is an example:

 @media (min-width: 1000px) { #newDiv { background-color: blue; } .col-xs-3 { display: block; } } @media (max-width: 999px) { #newDiv { background-color: red; width: 100%; padding-right: 50px; margin-right: 0px; } .col-xs-3 { display: none; } } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="newDiv" class="col-xs-9"><p>Hello World!</p></div> <div class="col-xs-3"><p>Hello to you to</p></div>

Take a full screen to see the response to the screen

+4
source

If you want to hide a column in any other place except a very small one, here's how:

Bootstrap 3:

 <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs"> </div> </div>

in other words, you must define each individual predefined viewport size in which you want to hide the column.

Bootstrap 4, slightly less redundant:

 <div class="row"> <div class="col-lg-12 col-xl-9"> </div> <div class="col-xl-3 hidden-lg-down"> </div> </div>

Also if you want to hide the column if the screen is too big:

Bootstrap 4:

 <div class="row"> <div class="col-md-12 col-sm-9"> </div> <div class="col-sm-3 hidden-md-up"> </div> </div>

also note that col-xs-[n] been replaced by col-[n] in bootstrap 4

+3
source

Starting with Bootstrap V4, the hidden-X classes have been removed. To hide a column by the width of the column, use d-none dX-block . Usually, you simply turn off the display of the size you want to hide, and then adjust the display to a larger size.

  • Hidden at all .d-no
  • Hidden on xs .d-none.d-sm-block
  • Hidden on see. D-sm-none.d-md-block
  • Hidden in md .d-md-none.d-lg-block
  • Hidden in lg .d-lg-none.d-xl-block
  • Hidden on xl .d-xl-none

Taken from this answer .

0
source

More articles:


All Articles