Implementing the class "col-xxl" is creating additional padding within the fluid container in Bootstrap

After playing around with the bootstrap grid system, I ran into a problem with the "col-xxl" class. Can anyone help me figure out why this issue occurred and how to fix it?

 <style>
    [class*="col"] {
      padding: 1rem;
      background-color: #33b5e5;
      border: 2px solid #fff;
      color: #fff;
    }
  </style>
<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>
<div class="container-fluid text-center ">
    <div class="row">
        <div class="row">
            <div class="col-xxl">col1-xxl</div>
            <div class="col-xxl">col2-xxl</div>
        </div>
        <div class="col-xl">col1-xl</div>
        <div class="col-xl">col2-xl</div>
    </div><div class="row">
        <div class="col-lg">col1-lg</div>
        <div class="col-lg">col2-lg</div>
    </div>
    <div class="row">
        <div class="col-md">col1-md</div>
        <div class="col-md">col2-md</div>
    </div>
    <div class="row">
        <div class="col-sm">col1-sm</div>
        <div class="col-sm">col2-sm</div>
    </div>
</div>

This is the snippet of code I have been working on.

htmlcsscss-gridpaddingbootstrap-5

Answer №1

You made the mistake of including an extra row class around your div(s). Furthermore, you neglected to wrap a row class around your col-xl. Check out the corrected code snippet below:

[class*="col"] {
  padding: 1rem;
  background-color: #33b5e5;
  border: 2px solid #fff;
  color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f4e8f6eba4a3b2a7f7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dac6d8c58a8d9c89d9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid text-center ">
    <div class="row">
        <div class="col-xxl">col1-xxl</div>
        <div class="col-xxl">col2-xxl</div>
    </div>
    <div class="row">
        <div class="col-xl">col1-xl</div>
        <div class="col-xl">col2-xl</div>
    </div>
    <div class="row">
        <div class="col-lg">col1-lg</div>
        <div class="col-lg">col2-lg</div>
    </div>
    <div class="row">
        <div class="col-md">col1-md</div>
        <div class="col-md">col2-md</div>
    </div>
    <div class="row">
        <div class="col-sm">col1-sm</div>
        <div class="col-sm">col2-sm</div>
    </div>
</div>

Answer №2

You have included the class row twice, once with col-xxl and missing above with col-xl. Please refer to the snippet and code provided below for more information. Additionally, I have attached a snapshot for further clarification.

[class*="col"] { padding: 1rem; background-color: #33b5e5; border: 2px solid #fff; color: #fff; }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b170b15084740514414">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f1408140a17585f4e5b0b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    
        <div class="alert alert-primary text-center" role="alert">
        A simple primary alert—check it out!
      </div>
        <div class="container-fluid text-center ">
            <div class="row">
                <div class="col-xxl">col1-xxl</div>
                <div class="col-xxl">col2-xxl</div>
            </div>
            <div class="row">
                <div class="col-xl">col1-xl</div>
                <div class="col-xl">col2-xl</div>
            </div>
            <div class="row">
                <div class="col-lg">col1-lg</div>
                <div class="col-lg">col2-lg</div>
            </div>
            <div class="row">
                <div class="col-md">col1-md</div>
                <div class="col-md">col2-md</div>
            </div>
            <div class="row">
                <div class="col-sm">col1-sm</div>
                <div class="col-sm">col2-sm</div>
            </div>
        </div>

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

Thank you!

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

Interacting with a card in vuejs won't trigger any action

Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...

javascripthtmlcssvue.js

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height propert ...

htmlcssemailoutlookhtml-email

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

I am facing a challenge with my webpage layout. I have a fixed-top navbar at the top, followed by 3 sections. The second section contains nav-tabs. What I want is for the nav-tabs navbar to stick to the top of the page below the fixed-top navbar when the u ...

javascripthtmljquerycssbootstrap-5

Changing images based on different triggers - HTML Markup with jQuery Carousel

I have a website where I'm using a plugin called CarouFredSel, available at Most of the time, it works perfectly fine. However, there are some images that cause the markup to break. I've tried troubleshooting the issue but haven't been able ...

jqueryhtmlcarousel

The $().bind function will not function properly unless the document is fully loaded

Do I need to include $(document).ready() with $().bind? Here is the HTML portion: <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src=&quo ...

javascriptjqueryhtmlevent-handling

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

Could you please assist me with a bug I have encountered on an older version of Firefox for OSX (37.0.2)? I have included a screenshot of the issue here: https://i.sstatic.net/dzK0G.png Is there a way to use css to move the first character of the placehol ...

javascriptjqueryhtmlcssangularjs

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

Different floating divisions that are tightly packed adjacent to each other

I'm dealing with dynamically created divs that have variable content, all following the same CSS rules. My goal is to organize them into 2 columns without any space in between. I attempted to use float: left/right, but there still remains space at the ...

htmlcss

"Encountered a hiccup while trying to retrieve Selector with

I have a list of 335 different gene access numbers, each corresponding to a unique URL. These URLs are used to make requests from the NCBI website GenBank. The specific data I am looking for can be found in an XPath called: //*[@id="viewercontent1"]/pre ...

pythonhtmlxmlscrapypython-requests

Transitioning the width in CSS without using the "auto"

Currently, I am experiencing a problem with my CSS animation that is leaping directly from the start to finish. It appears to be connected to a similar issue addressed in this thread. My inquiry is: Is there a way to create a smooth transition in width f ...

csswidthcss-transitions

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

javascripthtmlajax

What is the most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

htmlcssrweb-scrapingrvest

Setting up the php/MVC framework on a server

Currently, I have developed a project using HTML/PHP and need guidance on uploading it to the server. My knowledge of servers is limited, but I do understand that the first page should be an index.php or index.htm file placed in the public_html folder. How ...

phphtmlmodel-view-controllerconfigurationserver

Is the PHP Form receiving various POST values during submission?

I'm currently facing an issue while trying to create a signup form using HTML/PHP. When I enter my password, it gets replaced with a previously saved password upon submission, and I'm unsure about the reason behind this. Here is the code for my ...

phphtmlpostsubmit

The form data is being passed as null to HttpContext.Current.Request

My file upload module is working well with Postman without any content type. However, in the code, the file count always shows as 0 in the backend API. If anyone has any insights into what I might be doing wrong, please help me out. Thank you. Below is my ...

javascripthtmlangularjsasp.net-web-api

Preventing scrolling on a YouTube video embed

I have been working hard on developing my personal website. One issue I encountered is that when there is a YouTube video embedded in the site, it stops scrolling when I hover over it. I would like the main document to continue scrolling even if the mouse ...

javascriptjqueryhtmliframeyoutube

Ways to show the existing value of a <select> in a label without altering the function

I currently have a label that changes to display the selected option from a dynamic select dropdown, but it only updates when the selection is changed. I would like it to also display the current value when the page first loads. I attempted to change &apos ...

javascriptjqueryhtmlcssselect

Fetching data from local JSON file is being initiated twice

I need some help understanding why my code is downloading two copies of a locally generated JSON file. Here is the code snippet in question: function downloadJson(data, name) { let dataStr = 'data:text/json;charset=utf-8,' + encodeURICompo ...

javascripthtmljson

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

If I have a Json File structured like this: {"403": [ { "403-01-01": "219,00" }, { "403-01-02": "180,00" } ], "404": [ { "404-01-01": "26,00" }, {"403-01-02": " ...

javascripthtmlarraysjson

Converting this HTML/PHP code into JavaScript: A step-by-step guide

I have been struggling to convert this code into JavaScript in order to set the document.getElementById().innerHTML and display it in HTML. Can anyone assist with writing this code in JavaScript? <form action='create_new_invoice.php?name="<?php ...

javascriptphphtml