48

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.

1

5 Answers 5

63

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.

1
  • except if you want d-flex or d-md-flex, d-lg-flex and so on...
    – Raf A.
    Commented Jun 14, 2022 at 13:07
48

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>

5
  • Nice, this is a much better solution.
    – HTMLNoob
    Commented Jan 29, 2016 at 5:52
  • That's better solution.
    – PPShein
    Commented Jan 29, 2016 at 5:59
  • 3
    This does not work in new Bootstrap 4. You should use another approach
    – Marek
    Commented Dec 18, 2017 at 0: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
    Commented Jan 17, 2020 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. Commented May 16, 2021 at 12:35
16

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

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

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

0
4

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.