Difficulty encountered in setting margin to 0 in Bootstrap 4 framework

Upon observation, I found that setting margin: 0px had no effect. Even after specifying a margin of 0 for left and right, the screenshot still displayed the margin.

https://i.sstatic.net/mkYsO.png

Initially, I checked for any conflicting classes or IDs causing this issue but found none.

Why is this happening? I even tried using !important, but it didn't make any difference.


html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.header {
    background: black;
    height: 60px;
    position: fixed;
    z-index: 1;
    width: 100%;
}

Jsfiddle link

UPDATE:

The issue seems to be related to the unusual @media settings in Bootstrap 4. I observed that disabling these settings individually resolved the problem:

https://i.sstatic.net/VDtzj.png

Why does Bootstrap 4 behave like this, and how can I deactivate this behavior?

EDIT: Switching back to version 3.3.7 alleviated the issue completely...

cssbootstrap-4

Answer №1

Utilizing the .m-0 class sets margin:0!important; on the .container, which centers it by using left and right margin values of auto along with fixed widths.

If you wish for your .container to occupy the entire screen, opt for .container-fluid.

A note on the usage of .m-0 and similar classes:

Bootstrap took a peculiar approach in v4 when introducing a new system for setting margin and padding. It is considered unusual and overly powerful in terms of specificity.
This system necessitates the use of !important for classes like m-* and p-*, leading to issues when applying varied margin/padding values responsively.
Personally, I believe it is a mistake and have chosen not to implement this system in any of my projects.

If you decide to utilize these classes, be prepared to employ !important and at least one custom .className to override Bootstrap's selectors with your preferred values.

The simpler alternative would be to forego .m-* and .p-* classes altogether and apply margins and paddings as was done in previous versions of Bootstrap, without the need for !important.

Note: Uploading code images is discouraged (on SO) for various reasons:

  • It hinders indexing, making it harder for others facing the same issue to find a solution through search
  • Oftentimes, comprehending code is easier and quicker when the result can be seen and inspected, which is impeded when code is posted as an image

Consider replacing images with actual code or including a Minimal, Complete, and Verifiable example in your question that illustrates your problem.

Answer №2

The new version of Bootstrap utilizes flexbox for layout. To take advantage of this, consider using the display: inline-flex property - you can easily apply it by adding the class: .d-inline-flex

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

Tips for adjusting the default container width in MaterializeCSS

The default width of container in MaterializeCSS is initially set to 70%: While the container class is not an integral part of the grid system, it plays a crucial role in organizing content by allowing you to centrally align your page's content. Th ...

cssgridviewmaterialize

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

cssbuttoncarouselbootstrap-5border-radius

The issue of border-radius and shadow box inconsistency

I'm trying to style a div with the following properties: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt; } <div class="example"> </div> ...

htmlcss

Adjust the overflow to automatically decrease at regular intervals

Is there a way to make the scroll automatically move down a bit every few seconds, revealing more text in the process? Here's an example of how I want it to work: http://jsfiddle.net/Bnfkv/2/ ...

javascriptjqueryhtmlcss

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

Can you show me how to recreate a 502 gateway timeout error?

Looking for suggestions on how to create a page that exceeds 600 seconds to load? Any tips on triggering a 502 gateway timeout error would be helpful as well. ...

javascripthtmlcssajax

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displa ...

javascriptcsscanvasthree.js

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

javascriptjqueryhtmlcss

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

cssgoogle-chromegoogle-chrome-devtools

Achieving a sleek line effect with a gradient border

Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...

cssgradientlinear-gradients

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

htmlcss

Divs that are floated and only partially visible at the end

My layout consists of 6 Divs floated left to create 6 columns. The width of all these floats combined may extend beyond the window width for most users, especially with the 6th column included. Is there a way for this 6th column to be partially visible ( ...

csscss-float

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

css

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

In my API, I'm dealing with a JSON request parameter that includes an HTML string. This HTML string references CSS styles from a separate .css file. However, when an HTML element has two CSS classes assigned to it, neither of the classes' styles ...

ioscssjsonswifthtml-email

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

Having trouble with the alignment of a textbox and button on Chrome, they're not displaying correctly. Here are examples from different browsers; notice how the textbox in Chrome is misaligned. Internet Explorer/Firefox https://i.stack.imgur.com/mf ...

htmlcss