When incorporating the Bootstrap 5.3.3 grid with the class 'row w-100', there appears to be a noticeable amount of unused space on the right side

While trying to implement Bootstrap grid, I ran into an issue. When executing the code below:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Card Gallery</title>
      <link href="
         https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b362b35">[email protected]</a>/dist/css/bootstrap.min.css"
         rel="stylesheet" />
   </head>
   <body>
         <div class="row " style="height: 200px; background: gray; padding: 20px">
            <div class="col-4" style="background-color: brown;"></div>
            <div class="col-8" style="background-color: blue;"></div>
         </div>
      <script src="
         https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269746977">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>

a horizontal scrolling bar appearshttps://i.sstatic.net/ED5Sl9PZ.png

To address this issue, I applied the 'w-100' class on the 'row' element

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Card Gallery</title>
      <link href="
         https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1fce1ff">[email protected]</a>/dist/css/bootstrap.min.css"
         rel="stylesheet" />
   </head>
   <body>
         <div class="row w-100" style="height: 200px; background: gray; padding: 20px">
            <div class="col-4" style="background-color: brown;"></div>
            <div class="col-8" style="background-color: blue;"></div>
         </div>
      <script src="
         https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358455846">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>

However, now there is extra space on the right. https://i.sstatic.net/QSwaU7pn.png

How can I remove the scroll in the first scenario or eliminate the excess space on the right in the second case?

htmlcssbootstrap-5bootstrap-grid

Answer №1

Ensure you include a Bootstrap container to properly enclose the row. In Bootstrap, it's essential for rows to be nested within containers (and potentially also within card-body in Bootstrap 4). Neglecting this structure may lead to issues with margins and padding alignment. If you require a full-width container, utilize container-fluid.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e8598859b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row " style="height: 200px; background: gray; padding: 20px">
    <div class="col-4" style="background-color: brown;"></div>
    <div class="col-8" style="background-color: blue;"></div>
  </div>
</div>

If modifying your HTML structure is not an option, consider adding g-0 to the row.

To understand why the scrollbar or empty space emerges, refer to this comprehensive explanation. In essence, margins do not impact the width of the container (body in your original code), but rather affect only the row's width itself (which is influenced by w-100).

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

Attempting to update an AJAX field with the returned value, but it only updates after clicking away from it

Image of form utilizing AJAX & JS The current setup involves a maintainer that uses AJAX to update the "Calc" field in response to a number entered in the "Order No" field. The issue is that the "Calc" field does not update immediately after typing in the ...

javascriptjqueryhtmlajax

On my website, two elements are stacked on top of each other

The CSS framework I am currently utilizing is Materialize Whenever I try to add a new element, it inexplicably appears below the ones above it. I did not specifically instruct it to be positioned underneath or below the cover container. Adding a z-index c ...

htmlcssmaterialize

Customize jQuery slideDown animation to have a specific height and handle overflow situations

Below is the HTML snippet I am working with: <div class="text">bla bla bla bla</div> <div class="button">Show</div> Here is the corresponding CSS: .text{ height:100px; overflow:hidden; } Imagine the .text div contain ...

jqueryhtmlcssslidedown

"Designing with CSS: The Art of Styling

Recently, I came across a styling issue with a text area. After adding the following code to the view file of a Yii Application and the corresponding styling code to the CSS file, I noticed that the border of the text area remained unchanged when an error ...

css

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

htmlcsspseudo-classcss-specificity

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

javascriptcssreact-native

What are the steps to make a dropdown menu using only HTML and CSS?

Can someone please share the most straightforward method for creating a drop-down list using just HTML and CSS? ...

htmlcss

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

javascriptphpjqueryhtml

Modifying the overflow behavior within a Vuetify dialog

Is there a way to have a floating action button positioned on the top right of a dialog, slightly overflowing so it's offset from the dialog itself? I'm struggling to override the 'overflow-y: hidden' property set by v-dialog. <v-dia ...

cssvue.jsvuetify.js

Images within the signature are not appearing as intended

Trying to find a way to display a company logo in an email signature without it being blocked by default on different email clients. Initially, I attempted uploading the image to the company website, but encountered the following error: So, I decided to t ...

htmlimageemailhtml-email

Center float elements with a percentage width

I am attempting to design a layout in which two elements float alongside each other, starting from the center. I have been successful in achieving this, but only when the width of the two floating elements is fixed. Want to take a look? Follow this link: ...

htmlcss

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

htmlcssangularjs

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page. div.container { height: 200px; width: 400px; border: 1px solid black; overflow-y: scroll; ...

htmlcsscss-position

Regarding a listener within a quiz game's event system

I'm dealing with an issue in my quiz-game. I'm curious if I need to implement an event-listener for refreshing the initial page with a question and 4 options. Can anyone guide me on how to do this? My questions are stored using JSON. Here is the ...

javascripthtmladdeventlistener

Differences between using CSS custom properties in the :root selector versus the body/html tags

Why would you choose to define global CSS custom properties in the :root element rather than in the body or html tags? How might this decision impact the effects or performance of the page? ...

csscss-variables

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

javascriptjqueryhtmlmodal-dialogsemantic-ui

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...

javascriptjqueryasp.netcssajax

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

Every time I attempt to utilize pdf.js, I encounter a Cross-Origin Request block

When attempting to read a local PDF file using pdf.js, I included the following script tag: <script src="https://cdn.jsdelivr.net/npm/pdfjs/build/pdf.min.js"> </script> To check if it was working, I added a simple console.log: ...

htmlpdf.js