What is the best way to remove the excess space beneath a column in Bootstrap 5?

I made the changes as instructed, but when I view it on a mobile phone, the blue box and pink box are not aligned as I want them to be. I have attached a screenshot for reference, and I would like the mobile version to mirror the desktop version.

I am unsure which element is causing this misalignment.

--UPDATE--

To provide further clarification, here is a screenshot illustrating how the container_tag and container_box should appear on the mobile screen (365px). Desired look

Current appearance

.side_feedback{
    background-color: pink;
    padding: 10px;
    height: 300px;
    width: 180px;
    border-radius: 10%;
    margin-left: 17px;
}
.container_tag{
    background-color: royalblue;
    min-height: 200px;
    max-width: 2rem;
    border: 6px solid royalblue;
    float: left;
}
.tag{
    transform: rotate(-90deg);
    position: relative;
    top: 8rem;
}
.container_box{
    background-color: pink;
    min-height: 200px;
    border-left: 6px solid white;
    width: 95%;
    position: relative;
    float: left;
}
<div class="container-fluid">
        <div class="row mb-4 g-5">
            <div class="order-2 order-sm-1 col-lg-2 col-md-2 col-xs-10">
                <div class="col-md">
                    <div class="side_feedback">
                        <p>Give us feedback!</p>

                    </div>
                </div>
            </div>
            <div class="order-1 order-sm-2 col-10">
                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1 row-cols-auto g-4">
                    <div class="col-12">
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                        </div>
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                    <div class="col-12"> 
                        <div class="container_tag">
                            <h3 class="tag">TEXT</h3>
                        </div>
                        <div class="container_box">
                            
                        </div>    
                    </div> 
                </div>
            </div>
        </div>

cssspacingbootstrap-5gutter

Answer №1

If you happen to be noticing the significant vertical white space below the two pink blocks, it is likely due to the fact that you are utilizing the position: relative property on the pink container_box. The position: relative property positions the element in its original spot (below your container_tag div) and then shifts the element to the new position, leaving the original space intact.

To eliminate the white space, simply add float: left to the styles of both your containers.

.container_tag {
    background-color: royalblue;
    min-height: 180px;
    width: 9%;
    max-width: 3.2rem;
    float: left;
    position: relative;
}

.tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg)
}

.container_box {
    background-color: pink;
    min-height: 180px;
    border-left: 6px solid white;
    width: 91%;
    position: relative;
    float: left;
}

@media (min-width:768px) {
    .container_box {
        width: calc(100% - 3.2rem);
    }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706e733c3b2a3f6d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 px-0">
            <div class="row gx-0">
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">
                    </div>
                </div>
                <div class="col-12 mb-3">
                    <div class="container_tag">
                        <h3 class="tag">Text</h3>
                    </div>
                    <div class="container_box">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Another thing to keep in mind - you don't have to assign the same column class for various breakpoints (col-lg-10 col-md-10 col-xs-10). Using col-10 will suffice and cover all the subsequent breakpoints. Additionally, Bootstrap 5 has done away with the xs designation, as that was utilized in Bootstrap 3.

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

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Hi there, I'm having an issue with Bootstrap and Sass when trying to add new colors to my theme map. Can anyone help me figure out what I might be doing wrong? Thank you in advance. I've been attempting to include a new color in the theme-colo ...

csssassbootstrap-5theming

Bootstrap 4 collapsible navbar with a stacked design

I am struggling to create a collapsible navbar. Even though everything seems to be working, the nav items are not stacking vertically as they should be. Instead, they are appearing horizontally next to each other. Here is the code snippet: <nav class= ...

htmlcsstwitter-bootstrapbootstrap-4

Trouble with DevExpress ASPxButton: Some Properties Fail to Update

It's been a while and I'm facing a tough challenge. I need to change the image source of an ASPxButton from the code behind, but it seems like the height, width, and border style are getting lost in the process (resulting in an image with its own ...

csswinformsdevexpressaspxgridview

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrap

Hide all elements in jQuery that do not have a class assigned

I've implemented a straightforward jQuery script that toggles the "active" class on an li element when it is clicked: $('li').click(function() { $(this).toggleClass('active'); }); My goal is to hide all other li elements in t ...

javascriptjquerycssif-statement

To implement a class based on a media query, only pure CSS or HTML is required

Is there a way to apply a specific class to an ID based on screen height using only CSS, HTML, or LESS without pre-compilation? The goal is to set classes from Add2Any, not CSS properties. Here is a link to the jsfiddle. The desired outcome is to have th ...

htmlcssresponsive-designlesssocialshare

The issue of overflowing scroll functionality appears to be malfunctioning

.main-content{ height: 100%; width: 60%; min-height: 800px; background-color: white; border-radius: 5px; margin-left: 1%; border: solid 1px black; } .profile-banner{ display: flex; flex-direction: row; justify-content: space-between; ...

css

Choose the content in the second column

Can anyone help me with CSS selectors? I've been trying to target the second .col_content element in my code to apply a specific background image, but I haven't had any luck so far. Adding a second class would be an easy fix, but I'm curious ...

htmlcsscss-selectors

Understanding MUI5 prop handling

Recently, I decided to experiment with Material UI 5 sx props just for fun. I encountered a bit of confusion while trying to replicate the behavior of the previous MUI 4 makeStyles function. Specifically, I was attempting to pass JSS classnames to sx props ...

cssreactjsmaterial-uijsssx

Enable the option to customize the icon of the recently activated sidebar menu item

I need help with changing the arrow icon of a menu-item only when it is clicked, without affecting all other menu-items. In the image below, you can see that currently, clicking on any menu-item changes all the arrows. Attached Image //sidebarMenu jQu ...

javascripthtmljquerycss

Ways to ensure the text on my website scrolls into view as the user navig

Is there a way to have my text show up as I scroll? I came across this , but I'm interested in how it actually functions. I saw a similar inquiry before, but it doesn't make sense to me. Can someone please explain or provide some examples on how ...

javascriptjqueryhtmlcss

Elements floating and creating gaps (caused by varying heights)

I am working on developing a responsive webpage. This is what I am aiming to achieve. View jsfiddle #container { max-width:500px; width:100%; color: #fff; } #one { width:300px; height:200px; background:#66BCD9; float:left; } #two { wid ...

htmlcss

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

htmlcsswhitespaceviewport

Utilize Flexbox and Material UI to position Item at the bottom of the layout

I'm attempting to include Unassigned Text at the bottom of my Container, following the layout shown in this mockup:https://i.sstatic.net/863cl.png Here is the code I currently have. I'm facing difficulty in getting the border between the play bu ...

cssreactjsflexboxmaterial-ui

The initial render of Next.js is not properly loading the CSS files

Encountering an issue with the initial load of the mobile app version; it seems that the CSS of my component covering the page is not loading correctly on the first screen load. However, when resizing to desktop and then switching back to mobile view, the ...

javascriptcssreactjsnext.jsmaterial-ui

Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details. Please refer to m ...

htmlcssangularjsmeanjs

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

htmlcssasp.nettelerik

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

My goal is to stack multiple background images within a single div container while ensuring their position is relative to the screen height. The problem I'm encountering is my inability to modify CSS values separated by commas. Here is my logical appr ...

javascriptjquerycsshtml