how to hide one column from grid in bootstrap mobile version

Question

I think it's a bit tricky that I want to hide one column from a grid in bootstrap mobile version. Let's show 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 image portion when viewed by mobile device. What I want is I don't want that spacing of image portion even it's hidden as increasing left portion to reach till the right side.

For Bootstrap 4.1, see https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4/50558711#50558711 — Alastair McCormack, Aug 12 '19 at 07:28

score 57 · Accepted Answer · answered Oct 12 '19 at 17:41

Since Bootstrap V4 the hidden-X classes have been removed. In order to hide a column based on the column width use d-none d-X-block. Basically you simply turn off the display of the size you wish to hide then set the display of the bigger size.

Hidden on all .d-none
Hidden on xs .d-none .d-sm-block
Hidden on sm .d-sm-none .d-md-block
Hidden on md .d-md-none .d-lg-block
Hidden on lg .d-lg-none .d-xl-block
Hidden on xl .d-xl-none

Taken from this answer.

except if you want d-flex or d-md-flex, d-lg-flex and so on... — Raf A., Jun 14 '22 at 13:07

score 47 · Answer 2 · answered Jan 29 '16 at 05:47

47

Since, you are hiding the second column in "xs", you can use the full width for the first column by defining the class "col-xs-12" to 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>

answered Jan 29 '16 at 05:47

Siva

2,735
16
14

Nice, this is a much better solution. – HTMLNoob Jan 29 '16 at 05:52
That's better solution. – PPShein Jan 29 '16 at 05:59
3

This does not work in new Bootstrap 4. You should use another approach – Marek Dec 18 '17 at 00:10
2

Maybe it should just be notated/updated that it is a Bootstrap v3 example. Not changed. The question specifically pertained to v3, it's even tagged. – Musselman Jan 17 '20 at 22:29
This approach does not work on bootstrap 5 as I have tested it. And as others have pointed out it also does not work on Bootstrap 4. – yogihosting May 16 '21 at 12:35

jumps4fun · Answer 3 · 2020-02-12T15:13:03.073

If you are using bootstrap 4, and/or want to hide a column on anything other than extra small view, here is 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 have to define every single individual predefined viewport size you want the column to be hidden in.

Bootstrap 4: (a little 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 a column if the screen is too big:

<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] has been replaced by col-[n] in bootstrap 4

I have not checked if the Bootstrap 4 code still works for Bootstrap 5. If anyone does, feel free to drop a comment :) — jumps4fun, Feb 23 '22 at 11:43

HTMLNoob · Answer 4 · 2016-01-29T05:48:55.817

What you have 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>

Make this full screen to see the screen response

score 1 · Answer 5 · answered May 18 '23 at 15:22

In Bootstrap 5 we use the display utilities (https://getbootstrap.com/docs/5.3/utilities/display/).

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/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 d-none d-sm-block">
      <img src="https://placehold.co/100x100/">
    </div>
</div>

how to hide one column from grid in bootstrap mobile version

5 Answers5

Linked