How can I turn off the Jumbotron specifically for mobile devices in Bootstrap 4?

I have implemented a jumbotron on my website to create a full-height page on desktop, but I would like to disable the jumbotron on the mobile version. The content inside the jumbotron is extending beyond the available space on mobile, causing overlap with other elements. I am using Bootstrap 4 for my website. Below is the code snippet:

<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>
htmlcssbootstrap-4

Answer №1

If you're looking to customize the CSS based on screen size, consider using a media query like this:

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

        .jumbotron {
          width: 100%;
        }
    }

Feel free to adjust the max-width value to fit your needs, and don't hesitate to modify the CSS properties within the media query. You can experiment with different styles using developer tools to see what works best for your design.

Building on Islam Elshobokshy's earlier comment, this is just a more detailed explanation of how to approach this customization. Play around with it and see what works best for your project!

Answer №2

Absolutely! Concealing elements solely for mobile users is achievable.

To achieve this, simply include the classes .d-none .d-sm-block to ensure the elements are hidden exclusively on 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>

If you seek further information on how to hide elements for specific devices, kindly visit the bootstrap documentation: http://getbootstrap.com/docs/4.1/utilities/display/

Answer №3

Utilizing Bootstrap 4 to its full potential means taking advantage of its features, such as breakpoints. By configuring your breakpoints in the bootstar_config file (based on screen width in pixels), you can tailor the styling of your classes accordingly.

Learn more about using media breakpoints in Bootstrap 4-alpha here

For example:

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

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

Answer №4

Here is the CSS code for the "jumbotron" class. You can make adjustments based on your media query, as recommended by .

.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;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

When clicking the "more info" or "less info" buttons to slide content up or down, a spacing glitch is created in IE7. Using show/hide instead of slideUp/slideDown seems to solve the issue. Is there a way to make sliding work in IE7 without causing this pro ...

javascriptjquerycssslideupslidedown

Transform a button into an AngularJS directive

Is there a way to create a custom directive in HTML to represent a button? For example: <buy-button></buy-button> Here is the code that I would like to change: <md-button class="md-cornered" ng-disabled="0>=gains" ...

javascripthtmlangularjsangularjs-directive

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

c#javascriptjsonhtmlasp.net-mvc-4

Encountering issues with the hyperlink tag '<a>' in an HTML document

I've encountered an issue with the code on my HTML page: <body> <div align="center"> <a href="../index.html"> <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"> &l ...

javascriptjqueryhtml

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...

angularjshtmlcss

I'm in need of assistance with Laravel 6 to implement a search functionality that can search for users by name, specialty, and country

Whenever I click the Search button, an error (Undefined nom) pops up. I am looking for someone who can help me troubleshoot and fix my code. Here is the code that needs correction: Controller: doctors.php <?php namespace App\Http\Cont ...

phphtmllaravel

Are the navigation links at the bottom of the sidebar?

I've been experimenting with positioning three navigation links at the bottom of a sidebar I created, but I'm having trouble getting them there. Despite my attempts, I can't seem to figure out how to make it work. The background of the nav ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Adjust the scrollbar color when hovering over a particular div

Is there a way to change the color of a div's scrollbar when hovering over the div without assigning an id to it? I've attempted the following methods so far: div:hover { ::-webkit-scrollbar {color: black} } and div:hover + ::-webkit-scroll ...

javascriptcss

Create a Material UI Text Field that has a type of datetime and can span multiple lines

Is it possible to create a Material UI component of type "datetime-local" that can be displayed on multiple lines while still allowing the date to be edited? The issue arises when the width is too narrow and cuts off the date text. Although the TextField ...

htmlcssreactjsmaterial-uidatetimepicker

Retrieving input value in an Android WebView

I recently attempted to extract the value of an input type and store it as a string within my Android WebView. Unfortunately, I couldn't find a straightforward solution. The snippet of code in my HTML file is as follows: <input class="input100 ...

javascriptjavaandroidhtmlwebview

Submitting a form triggers an SQL insert using PHP and Mysql

On Page 1, users input their information and then proceed to Page 2. The data entered on Page 1 is stored in $_POST for access on the next page. I can successfully insert this data into a MySQL database without any issues. However, I want to ensure that th ...

phpmysqlhtmlpostpdo

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many? I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked ...

javascripthtmlcssvue.js

URL multiplying on its own accord

Do you have any idea why my subdomain's website is suddenly duplicating its URL and giving me an error? The correct URL is , but it ends up as this . When this happens, my site appears broken, almost as if the CSS setup is not correct. ...

phpurlbootstrap-4

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

javascriptjqueryhtmlcss

What is preventing me from opening this local html page without an IIS Server?

Currently immersed in a passion project that can be found at https://github.com/loganhenson/jsrpg This project has been a collaborative effort with a friend, utilizing Visual Studio Professional for development and testing it on my local IIS server. Init ...

javascripthtmlasp.netgoogle-chromebrowser

Using jQuery to handle multiple buttons with the same ID

Is there a way to address the issue of multiple buttons sharing the same id? Currently, when clicking on any button, it only updates the record with id=1. How can this problem be resolved? div id="ShowPrace"> <?php try { $stmt = $pdo->prepare(" ...

javascriptphpjqueryhtmlajax

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

phphtmlsql