What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

My code may seem simple, but I have encountered an issue with it:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7a9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="pt-5  bg-info">
  <!-- Something -->
</div>

<div class="row pt-4 bg-success">
  <!-- Something -->
</div>

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

I have noticed that the two blocks in my output have different widths. Can anyone explain why this is happening and how I can avoid it in the future?

Answer №1

The issue arises from the Bootstrap library's internal row class setting of -bs-gutter-x: 1.5rem;. By manually overriding this property, you can resolve the problem as desired. However, it's important to note that changing the behavior of the library in this manner can lead to unforeseen side effects and is generally not recommended. For a more appropriate solution, I recommend following the steps outlined in the "Suggestion" section.

<!doctype html>
<html lang="en>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8affe4f8e4fa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <style>
      .row {
        --bs-gutter-x: 0rem !important;
      }
    </style>
  </head>
  <body>
    <div class="pt-5  bg-info"></div>
    <div class="row pt-4 bg-success"></div>
  </body>
</html>

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

Suggestion

The pt class is utilized for adjusting the padding-top property, and its alternative use is irrelevant to the issue at hand. For responsive horizontal alignment of elements, ensure child <div> elements have a parent <div> with the classes row and container.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf6eaf4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="pt-5 bg-info"></div>
  </div>
  
  <div class="row">
    <div class="pt-4 bg-success">
  </div>
</div>

References

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

Dealing with full-width elements on mobile devices

I've got a pretty basic question here but can't seem to find a straightforward answer. I'm using Bootstrap to style a website and struggling with making it mobile-responsive. Following the given answer, I used this code to show a button ne ...

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

Discovering elements with multiple classes using watir-webdriver

In this scenario, let's consider an element like the one below: <div class="first_class second_class"></div> Now, we can locate it by its classes using the following methods: browser.div(class: 'first_class') browser.div(class ...

Dealing with Issues in Projectile Image Display: Solutions for Resolving the Error

I've been attempting to change my projectile from circles to images, but I'm encountering this error File "C:\Users\Habib\Desktop\PYTHONGGAME\py.py", line 353, in <module> bullets.append(projectile(round(player ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

Display secret content upon hovering with a stylish animation

My current structure is as follows: HTML: <ul> <li> <span>asd</span> adsafsadlvjnsd </li> </ul> CSS: span { width: 0; } li:hover span { width: 60px; } In this setup, the content inside the span tag is h ...

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

Optimal Placement of CSS and index.html Files in ReactJS with Redux

Currently, my setup for the index.html file looks like this: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Pra ...

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

Scrolling automatically

I'm experimenting with creating a typing effect using JavaScript and the typed.js library, found here: My approach involves using a div as a container. However, I've encountered an issue - when the text reaches the height of the div, scroll bars ...

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

Utilizing jQuery to highlight and customize portfolio items with odd numbers

I'm currently trying to rearrange the module header and portfolio image for odd-numbered portfolio items. Feel free to check out my sandbox here. I thought the code below might do the trick, but it's a no-go. jQuery(document).ready(function($){ ...

Discover the Magic of CSS Animation

I am not experienced in CSS animations and have limited knowledge about animations. I am trying to create an animation where a grey box slides down from the top line above the login/register section, but currently it only fades in. If anyone can provide an ...

The Bootstrap tooltip fails to function properly following a page update or refresh

My tooltip component seems to be malfunctioning, and I suspect the issue lies within the option attributes. I am unsure where the problem is occurring and how to resolve it. The tooltip component was initialized using the code below: var options = { anim ...

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

Converting dynamic content within a div into an interactive link

I am currently working with Longtail's JW Player and facing some difficulties with a basic function. Since I am not familiar with the programming language terminologies, I will describe the issue step by step: There is a JavaScript code that displays ...

Protruding button on the surface of the form

I'm struggling with a form layout issue. Here's what it looks like: https://i.sstatic.net/arfJQ.png Removing the mb-3 class doesn't solve the problem, it just removes the spaces between the inputs. How can I make sure the button remains in ...

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...