Is there a way to disable Jumbotron only on mobile in Bootstrap 4?

Question

I have used jumbotron to have a full height page on the desktop version on my website, but I want to have the normal layout (disable jumbotron) on the mobile version. Because on the mobile version, content inside the jumbotron div is going outside as it is not enough space. And below div content is overlapping those content. I'm using Bootstrap 4. My code as below,

<section class="jumbotron">
    <div class="container">
        <div class="content row">
            <div class="col-12 jumbotron">
                <div class="single-work">
                    <h2>Title here</h2>
                    <p>Text here</p>
                </div>
            </div>
        </div>
    </div>
</section>

You can't "disable" it, but you could use media queries to modify the CSS as you need on mobile devices. — Alexandre Elshobokshy, Oct 29 '18 at 08:33
Yes you can do that using Media Queries as suggessted by @IslamElshobokshy. And for more detailed information you can visit here : https://www.w3schools.com/css/css_rwd_mediaqueries.asp — Mohan Rajput, Oct 29 '18 at 08:50

score 1 · Answer 1 · answered Oct 29 '18 at 08:46

You can use a media query like the following:

    @media only screen and (max-width: 875px) {

        .jumbotron {
          width: 100%;
        }
    }

You can change the max-width on the query to the one that suits you better and the css is just placeholder there, You can hide it, change the width, remove a property or whatever. Try Playing in developer tools to find which properties should be modified and how, and then add these modifications to the media query.

Islam Elshobokshy has already answered this in his comment, I just elaborated a little.

Thanks for your help guys. Really appreciate. I used a media query to solve the issue. — Ujith Nimantha, Oct 29 '18 at 08:51

score 1 · Answer 2 · answered Oct 29 '18 at 08:53

Yes! you can hide only for mobile devices.

All you go to do is to add .d-none .d-sm-block classes to get them hidden only for mobile (xs) devices.

<section class="jumbotron d-none d-sm-block">
    <div class="container">
        <div class="content row">
            <div class="col-12 jumbotron">
                <div class="single-work">
                    <h2>Title here</h2>
                    <p>Text here</p>
                </div>
            </div>
        </div>
    </div>
</section>

For more details on hiding elements for particular devices, please refer the bootstrap documentation: http://getbootstrap.com/docs/4.1/utilities/display/

disabling means display: none; on the jumbotron's class I think, so this solution is good if he is using the default bootstrap configs for the sm class — Patrik Alexits, Oct 29 '18 at 08:55

score 1 · Answer 3 · answered Oct 29 '18 at 08:53

if you are using Bootstrap 4, you should use it's features too, like breakpoints. In the bootstar_config file you can set up your breakpoints (screen width in pixels) and accordingly style your classes.

Using media breakpoints in Bootstrap 4-alpha

For: example:

.something {
    @include media-breakpoint-up(sm) { // from small resolutions
        padding: 20px;
    }
    @include media-breakpoint-down(md) { // under medium resolutions
        padding: 40px;
    }

    @include media-breakpoint-only(md) { // only on medium resolution
        padding: 40px;
    }
}

Thanks Patrik, This is awesome. – Ujith Nimantha Oct 29 '18 at 12:43 — Ujith Nimantha, Oct 29 '18 at 12:43

score 0 · Answer 4 · answered Oct 29 '18 at 08:49

this is the css for class jumbotron from here, alter accordingly using your media query as https://stackoverflow.com/users/8505314/giwrgos-lampadaridis says.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
.jumbotron > hr {
  border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 6px;
}
.jumbotron .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}

Thanks for your answer Carol. – Ujith Nimantha Oct 29 '18 at 13:17 — Ujith Nimantha, Oct 29 '18 at 13:17

Is there a way to disable Jumbotron only on mobile in Bootstrap 4?

4 Answers4