Bootstrap row divs that overlap

My fields are overlapping when I resize my window smaller. How can I create space between them?

UPDATE: Changing it to 

<div class='row ml-1' style="width:100px;">
reveals the overlap, and this is where I need to add space between them.

<!--BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--BOOTSTRAP CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<td id="td">
    <div class='row ml-1'>
            <div class='col-xs-6 mr-1'>
                <span class='bg-success rounded text-light font-weight-bold h6 p-2'>
                    P:123
                </span>
            </div>
            <div class='col-xs-6 mr-1'>
                <span class='bg-danger rounded text-light font-weight-bold h6 p-2'>
                    F:123
                </span>
            </div>
            <div class='col-xs-6 mr-1'>
                <span class='bg-primary rounded text-light font-weight-bold h6 p-2'>
                    NR:123
                </span>
            </div>
            <div class='col-xs-6 mr-1'>
                <span class='bg-warning rounded text-light font-weight-bold h6 p-2'>
                    E:123
                </span>
            </div>
            <div class='col-xs-6'>
                <span class='bg-dark rounded text-light font-weight-bold h6 p-2'>
                    NA:123
                </span>
            </div>
    </div>
</td>

View the overlap in this image of my website: Overlapping

htmlcss

Answer №1

After some adjustments, I was able to resolve the issue by incorporating a bottom margin to each div. This was achieved by utilizing the Bootstrap class mb-3, which translates to margin bottom 3rem.

<!--BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--BOOTSTRAP CSS-->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<td id="td">
    <div class='row ml-1'>
            <div class='col-xs-6 mr-1 mb-3'>
                <span class='bg-success rounded text-light font-weight-bold h6 p-2'>
                    P:123
                </span>
            </div>
            <div class='col-xs-6 mr-1 mb-3'>
                <span class='bg-danger rounded text-light font-weight-bold h6 p-2'>
                    F:123
                </span>
            </div>
            <div class='col-xs-6 mr-1 mb-3'>
                <span class='bg-primary rounded text-light font-weight-bold h6 p-2'>
                    NR:123
                </span>
            </div>
            <div class='col-xs-6 mr-1 mb-3'>
                <span class='bg-warning rounded text-light font-weight-bold h6 p-2'>
                    E:123
                </span>
            </div>
            <div class='col-xs-6 mb-3'>
                <span class='bg-dark rounded text-light font-weight-bold h6 p-2'>
                    NA:123
                </span>
            </div>
    </div>
</td>

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

Avoid using <input oninput="this.value = this.value.toUpperCase()" /> as it should not convert the text displayed on the "UI", rather it should send the uppercase value

<input oninput="this.value = this.value.toUpperCase()" type="text" id="roleName" name="roleName" class="form-control width200px" [(ngModel)]="role.roleName"> Even though the UI is changing ...

htmlangulartypescript

Using inline JavaScript to style an element when clicked

Looking for assistance with styling a link. I've connected an external stylesheet to my HTML file, so that part is all set. The goal is to modify the text-decoration when the onclick event occurs. Here's what I currently have: <a class="dopel ...

htmlcss

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

What is the best way to position a text input field at the top?

As a beginner in Html and Css, I am exploring how to position the text "Your Comment" at the top of an input field. https://prnt.sc/1k74619 <div class="comment"> <input placeholder="Your Comment" type="text&qu ...

htmlcss

What happens when browsers encounter unfamiliar at-rules?

CSS at-rules have been part of CSS since the days of CSS2. As CSS evolves with new specifications like @supports, it's interesting to see how different browsers handle unsupported rules. Do major browsers simply ignore unrecognized rules, or do they f ...

csscross-browser

Tips on enlarging a webpage without showing the scroll bar on the main component

My goal is to create a webpage that resembles a window application. However, I've encountered an issue where zooming in on the page results in a scroll bar appearing on the main page. The parameters for the main page (the parent) are set as follows: w ...

cssreactjsflexboxmaterial-uiscrollbar

The execution of JQuery/Javascript is restricted to only the initial condition within a Visualforce page utilizing the apex:outputpanel tag

After using only JavaScript for some time, I decided to try out jQuery. However, I'm facing an issue with executing a jQuery function. It seems that only the first condition in my code (the first IF) is being executed, while the second one (the second ...

javascriptjqueryhtmlvisualforce

Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

I have my own blog website: Essentially, what I am aiming for is When a user clicks on the search button, a floating semi-transparent textarea window should appear inside the designated rectangle area (as shown in the image, that red orange rectangle). ...

javascriptjqueryhtmlcss

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

Store data in Laravel's storage directory

I encountered an issue while trying to save files to the storage folder in Laravel after deploying the project on a web server (byethost7.com). The files were only being stored in the public folder. I ran the following command in the command prompt: >p ...

phphtmllaravelwebserverstorage

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

htmlcsscpanelgodaddy-api

Load a page from a different domain using uframe

Looking for a solution to successfully load an external URI using uFrame. Currently encountering an "Access Denied" issue when attempting to do so on Firefox. Any suggestions? ...

javascripthtmluframe

The default padding and margin in Bootstrap are making the images protrude beyond the edges of the container

I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the white ...

htmlcsstwitter-bootstrap

Tips for placing a background color *behind* a bootstrap button

When a button is clicked, I want to display an input with a background surrounding both the button and the input. Currently, my markup renders like this: https://i.sstatic.net/rxaPt.png So when the button is clicked, I need a yellow (alert-warning) backg ...

htmlcssbootstrap-4

Is there a method to style the parent DIV using CSS when the IDs of the child DIVs are

Similar Question: Looking for a CSS parent selector? If I am unable to modify the HTML file, is it possible to apply CSS styles to the parent DIV using only the ID of the direct child DIV? Here's an example scenario: <div> <div id="c ...

htmlcssdomcss-selectors

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Hello! I am in the process of creating my first website, and it's going to be a D&D character randomizer. Currently, I'm working on the Nav-bar section and I have four bars that I want to fit across the screen equally, regardless of the scree ...

htmlcss

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

javascriptcss

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

javascriptjqueryhtmlcss