Add some extra space at the bottom using Bootstrap 4 specifically for mobile devices like smartphones and iPhones

According to the instructions on Getbootstrap.com, adding CSS margin-bottom:4rem; is recommended for images.

The naming convention for classes is as follows: {property}{sides}-{size} for xs and 

{property}{sides}-{breakpoint}-{size}
for sm, md, lg, and xl.​

The issue arises when using the xs format, {property}{sides}-{size}, such as mb-4, since it applies the margin-bottom spacing to all screen sizes (sm, md, lg, xl) as well.

Is there any way to selectively apply the margin-bottom spacing in Bootstrap only to xs screens? It's like needing an "if statement" in Bootstrap to achieve this.

cssbootstrap-4

Answer №1

When dealing with classes that affect different screen sizes and CSS cascading, it's important to remember that you can use a second class to override the styles of the first one. For example:

<div class="mb-4 mb-sm-0"></div>

This allows the second class to take precedence over the first one when it becomes active.

.mb-4 {
  margin-bottom: 1.5rem !important;
}

@media (min-width: 576px) {
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
}
<div class="mb-4 mb-sm-0"></div>

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

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

What is the technique behind Gmail Email's Hover effect implementation?

Behave Annual keeps sending me emails about upcoming events. Recently, I noticed something strange in their newsletter. All the buttons and some text sections had CSS hover effects applied to them. When you hovered over them with your mouse, the color woul ...

htmlcssemailgmail

The usage of jQuery slideUp and slideDown is resulting in a bouncing animation effect

Hey there! I've been working on a cool slide up effect for an image using jQuery's slideUp and slideDown functions. It's working well, but I've noticed that when you hover over certain areas of the div/image, the effect becomes jumpy or ...

javascriptjqueryhtmlcss

Issues with the aligning of buttons using the justify-content property

The issue I'm facing involves a parent container with 3 buttons nested inside. The parent container is set to display:inline-flex, however, the justify-content: space-between property is not behaving as expected. Each button has a defined max-width in ...

htmlcssangularsassflexbox

Gradually Generated HTML website

Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error ...

htmlcssbootstrap-4notepad++

Adding a popover to a cell in a table: A step-by-step guide

Currently, I am attempting to display data in a single cell when hovered over using a popover. The problem I'm facing is that adding the data-toggle inside the td tag has no effect. Each cell is structured like this: <td style="padding: 0px; back ...

jqueryhtmlbootstrap-4

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

javascripthtmlcssangularjs

Guide to aligning text in a row using Bootstrap 4

One issue that is persisting is the fact that <p> and <h1> are displaying on the same line and despite my efforts, I am unable to center them properly. HTML <div class="container"> <div class="row" id="appSummary"> <h1> ...

twitter-bootstrapbootstrap-4

Utilizing a 100% width Bootstrap form with SelectBoxIt inputs

Utilizing SelectBoxIt inputs () in Bootstrap 3 horizontal forms is causing an issue. I want the input to adjust and collapse along with the form width, but setting the widths to 100% is causing them to collapse instead. To demonstrate the problem, I' ...

jqueryhtmlcsstwitter-bootstrap

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

Personalized radio button tags

Is there a way to ensure that all blocks are uniform in size with a 10px margin between them? Recently, the radio button was swapped out for a radio label, but now there is an issue with inconsistent sizes due to varying word lengths. How can this be res ...

htmlcsselementor

Box surrounding the image with a shade of gray, all thanks to

Despite trying to set "outline: none" and tweaking the border, I'm unable to resolve the issue. For reference, you can visit the page here: . I've shared the link because I'm unsure of what exactly needs fixing or adding on the page. Any gui ...

javascripthtmlcssbootstrap-4

What is the proper class name for the element to function correctly?

Here is a snippet of the Next.js code I am working on: import ReactMarkdown from 'react-markdown' import gfm from 'remark-gfm' import styles from './content.module.css' return ( <article className={styles.markdownbody}&g ...

cssnext.js

The hamburger menu in the Navbar of Bootstrap 4 is malfunctioning

My code was created using the VS Code editor, however it seems to be malfunctioning: ...

bootstrap-4navbarhamburger-menu

Center align the message 'No file chosen' in the File Upload control horizontally

I am facing an issue with a file upload control that I have implemented. The code is provided below: <div class="row"> <div class="col-md-12"> <div class="alert alert-warning normal-text hide" role="alert" id="ImportErro ...

javascripthtmlcsstwitter-bootstrap

How to place text on top of a thumbnail in Bootstrap using HTML

I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...

htmlcssimagetwitter-bootstrap

You are unable to move the image to the top of the screen after zooming it with CSS

I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image. However, I encountered an issue where, when zooming the image, it cannot be scrolled ...

javascriptcss

Aurelia encountering an error when attempting to load Bootstrap v4 during runtime

In my aurelia.json file, I have the following configuration for bundling vendor scripts. It was directly copied from a working reference implementation and has been functioning properly. { 'build': { 'bundles': [ 'name ...

javascriptaureliabootstrap-4

What could be causing my Bootstrap website to not extend to the full width of the screen?

I'm a budding Web Designer and Developer, and I'm facing an issue with my code not extending the full width of the screen while using the Bootstrap framework for a current project. Despite having created similar landing pages in the past without ...

htmlcssbootstrap-4responsiveness