Is there a way to eliminate the padding for the bootstrap jumbotron specifically on mobile devices?

Hello, I am currently utilizing the bootstrap jumbotron class and facing an issue - when the screen size drops below 500 pixels, I want to remove the padding that is automatically set by Bootstrap (padding: 2rem 1rem;). However, I'm struggling to override this default setting. Can anyone provide a solution? Appreciate your help in advance.

@media (max-width: 500px) {
    .jumbotron {
      padding:0;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>"
  <link rel="stylesheet" href="berkay.css">
  <link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
   <div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
  <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
   </div>
  </div>
</div>
</body>
</html>

htmlcssbootstrap-4

Answer №1

To remove padding by default, simply use p-0 or px-0 for horizontal padding (py-0 for vertical). Then, on larger screens, you can add padding with p-md-5 to apply it from the medium breakpoint onwards.

No custom CSS is needed for this.

<div class="container-fluid">
    <div class="jumbotron row p-0 p-md-5" style="height:100px;">
        <div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
        <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
        </div>
    </div>
</div>

Answer №2

Here is the code snippet you requested:

@media (max-width: 500px) {
    .container-fluid .row.jumbotron {
      padding:0px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="berkay.css">
  <link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
   <div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
  <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
   </div>
  </div>
</div>
</body>
</html>

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

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

htmlcssinput

Creating diagonal background cutouts using CSS

Can you create a diagonal cut in a background color using CSS? Check out this example https://i.sstatic.net/vtpYf.jpg .item { color: #fff; font-size: 30px; background-color: #565453; padding: 10px 10px 10px 10px; width: 52%; text-align: ce ...

css

What is the best way to add animation to switch between table rows?

I am looking to add animation effects when table rows appear and disappear. Initially, I attempted using a CSS transition, but it did not work due to the change in the display property. Subsequently, I opted for an animation, which provided the desired o ...

csscss-transitionscss-animations

The Bootstrap collapse functionality is malfunctioning

Bootstrap is not my strong suit. I'm struggling with getting the collapse effect to work properly. Can anyone provide some guidance? Here is the link to the bootstrap I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boo ...

htmlbootstrap-4

The changes made in the CSS file are not reflected in the browser

Recently, I encountered a strange issue with my new server where the CSS changes were not reflecting in the browser. Despite trying to refresh and clear the cache, the problem persisted. To investigate further, I used FileZilla to check if the updated CSS ...

cssbrowser-cache

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss

Feature of Thymeleaf: Download functionality

When working with my Thymeleaf template, I have successfully processed Java map content to HTML using the following code: <div th:each="file : ${files}"> <span th:text="${file.key}"></span> <!-- here file.key is retrieved --> ...

javahtmlthymeleaf

Create a custom, adaptive layout using Bootstrap that caters to different device types

I have created a website where users can upload a file with an activation code and input it manually. However, I want to restrict the file upload functionality on smartphones and tablets. Here is how I am attempting to do this: <!DOCTYPE html> &l ...

csshtmltwitter-bootstrapresponsive-design

Having trouble with a broken link on your HTML email button?

I'm attempting to add a button to an HTML email that redirects to a link within an href tag. Admittedly, my knowledge of html code is minimal. Here's what I've attempted: <p> <input style="width: 200px; padding: 15px; box-shadow: ...

htmlbuttonhtml-emaillocation-href

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

htmlcsscss-position

Submitting files using the HTML5 File API for server-side processing

I currently have a form set up like this: <form> ... <input type="file" multiple="multiple" id="images" /> <a id="add">Add</a> ... <input type="submit" value="Submit" /> </form> Upon clicking the ad ...

javascriptphpjqueryhtml

"Encountering a problem with a function showing an undefined error

Trying to incorporate a slider feature into my application led me to reference this w3schools sample. However, upon loading the page, the images briefly appear before disappearing. Additionally, clicking on the arrow or dots triggers an error stating: U ...

javascriptjqueryhtmlarraysslider

What could be the reason my CSS styles are not taking effect when trying to flip an image?

I am facing an issue with an app that has a two-sided HTML element. The goal is to flip the element when a user clicks a button. I have been experimenting with different approaches without success. Here is the code snippet I have been working on: HTML < ...

htmlcssvue.js

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

cssvue.jsvuejs3bootstrap-vuevue-composition-api

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

javascriptjqueryhtmlcss

Prevent users from including spaces in their usernames during registration

I've encountered an issue with my registration form. It currently allows users to register usernames with spaces, such as "user name" instead of just "username" without any spaces. Despite searching and reading numerous tutorials, none have been of m ...

phpmysqlhtmltrim

Encountering the error message "Unable to access property 'addEventListener' of null while trying to manipulate innerHTML"

Currently, I am utilizing innerHTML to include certain elements and a wrapper around them. for (i = 0; i < arr.length; i++) { b.innerHTML += "<div class='wrapper'><div class='col-4'>" + arr[i].storeID + "</div> ...

javascripthtml

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar

Which items have the capability to activate the key press event within the DOM?

I've been conducting some tests and it appears that only form elements and the window object are able to activate the keypress event. I've referred to the MDN documentation and the spec, but I couldn't find a definitive list of the valid ob ...

javascripthtmlevents

PhoneGap switches up the error type with each consecutive run

Why does PhoneGap change errors after every time it is compiled? Sometimes it runs without any issues, but then the same code throws strange errors like parse error or function not found, even though no changes were made to the code. Here is the code that ...

javascripthtmlcordova