Overflowing is the width of Bootstrap's Grid Row

I managed to create this layout using only Bootstrap 5, without any CSS customization.

Below is the HTML code I used:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <article>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"
      />

      <link rel="stylesheet" href="bs-justify.css" />

      <script
        src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"
      ></script>
    </article>
  </head>
  <body>

        <br>
      <h4 class="display4 text-center"><i>Understanding the Grid System</i></h2>
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
        <br>
  </body>
</html>

Hello everyone! As a beginner student, I am seeking some guidance on why Bootstrap's default settings lead to overflowing width by default. Any insights would be greatly appreciated!

cssbootstrap-5

Answer №1

For effective use of Bootstrap's grid system, it is recommended to wrap the .row element within either a .container or .container-fluid element. More information can be found on Bootstrap's Grid system documentation page, which states: "Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content."

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <article>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5a405a405f">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"
      />

      <link rel="stylesheet" href="bs-justify.css" />

      <script
        src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f4ebf4f4e1f6aaeef7c4b5aab5b2aab4">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc6dcc3">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"
      ></script>
    </article>
  </head>
  <body>

        <br>
      <h4 class="display4 text-center"><i>The Grid System</i></h2>
      <div class="container">
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
      </div>
      <p class="py-3 text-center">OR full-width container:</p>
      <div class="container-fluid">
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
      </div>
      <br>
  </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 fixed position feature seems to be malfunctioning

I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/ Here's My Code: <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area"> <h2 class ...

jqueryhtmlcss

Can the @keyframes in CSS3 be modified?

Exploring CSS3 animations has been a fun project for me, and I want to push the boundaries of what is possible. Currently, I have an infinite animation cycle that is working perfectly. However, I'm curious if it's possible to dynamically change ...

htmlcss

changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...

htmlcsssvg

What sets apart :first-child from :first-of-type?

I need help understanding the distinction between element:first-child and element:first-of-type Let's consider a scenario where you have a div element div:first-child → Refers to all <div> elements that are the first child of their parent. ...

csscss-selectors

Having trouble getting CSS to center text properly. It just won't cooperate

After spending 2 days trying to figure this out on my own, I have come to a dead end. It seems that my lack of expertise in CSS is the root cause of the issue. Here is the code snippet I am working with: <table class="demo"> <tr> <th style ...

htmlcss

Tips for adjusting arrow alignment in your custom breadcrumbs using Bootstrap 5.2.0

There is an issue with my custom Bootstrap 5.2.0 breadcrumb - the right arrow appears before the end of the breadcrumb's item box when I add one or more items. To demonstrate the problem, I have created a fiddle where you can see the error: .breadcru ...

cssbootstrap-5breadcrumbs

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

htmlcsstwitter-bootstrapjsf

Stylize the final element within a webpage using CSS styling techniques

In the code snippet below, my goal is to apply a specific style to the content of the final occurrence of "B". <div class="A"> <div> I am <span class="B">foo</span>. </div> <div> I like <span class="B"> ...

css

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

javascriptcssreactjsmaterial-ui

What is the best way to assign a title to every div element and showcase 5 div items in a single line?

I am using a "for loop" to call getjson multiple times and receive a response to display items on sale inside a div. Currently, my code displays the item name to the right of each frame, but I want the item name to appear below the iframe, similar to the c ...

javascriptjquerycsshtmlpagination

Eliminate the hazy white layer covering the exterior of an image that has been blurred using CSS

Hey there, I've encountered an issue with an image that transitions from blurred to unblurred when the dom is loaded. <div class="image-wrapper-container2"><div class="image-wrapper orig" style="background-image: url('https://www.w3scho ...

javascriptjqueryhtmlcssimage

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...

csssasszurb-foundationzurb-joyride

Create an element that spans the entire width of the page

Having trouble adjusting the width of the .navbar? It seems to only grow to one side and setting it to 100% width doesn't expand it to fill the whole page. Can anyone provide some guidance or assistance? Here's the code: return ( <div cla ...

htmlcssreactjs

Exploring the World of Print CSS, Embracing Bootstrap, and Master

In continuation of my previous query, I am facing an issue with setting up a filemaker foreach loop to display a group of images along with their names and IDs, accompanied by checkboxes. Upon checking the relevant checkboxes, the corresponding images are ...

phphtmlcsstwitter-bootstrap-3

How can I align a button right next to the table row data in HTML using Bootstrap?

Is there a way to add a button next to the table data in each row without a border? I attempted to create a new column for the button, but the border interferes with the design. I am using Bootstrap 4 for this project. Here is the HTML code: <div cl ...

javascripthtmlcssbootstrap-4bootstrap-table

Is there a way to apply the style property only when a component is hovered in Next.js?

I would like the ability to hover over a component and have it display with unique CSS characteristics. For instance, if I hover on item A, I only want item A to stand out from the rest. Currently, I am using this method of changing the element's bac ...

javascripthtmlcssreactjsnext.js

Eliminate resistance on HTML components

Have you ever noticed that when you click on an HTML element, such as images, you can drag a "shadow version" of them around on the screen? For example, take the Stack Overflow logo. If you click and drag it, you'll see a dark version of the logo mov ...

javascripthtmlcss

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

javascriptjquerycsssticky-footer

I am looking to include the "!important" rule in my animation code

Is it feasible to include !important in animations? I attempted to incorporate it in Angular in the following manner: angular.element(".myClassName").css("margin-left","100px !important"); ...

jqueryangularjscss

Bootstrap column height problem arises when the second column contains added margin, padding, or is wrapped in another element

I am facing an issue with a two-column layout where one column serves as the page heading (left) and the other displays breadcrumbs (right). The problem arises when the first column fails to stretch its height fully due to padding or margin in the second c ...

htmlcssbootstrap-5