Overlapping divs in row bootstrap

user_15449745 0
Viewed 95

I have these fields but they are overlapping when I resize my window smaller. What do I need to change to make some space between them?

NOTE: if you change it to <div class='row ml-1' style="width:100px;"> you can see that they overlap, and it's here I need 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>

Here I have a image of my website where they overlap eachother Overlapping

css html
1 Answers

Okay I made a fix to this, by adding a margin at the bottom of every div. This is done by the bootstrap class mb-3 = 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>

user_154497450
Related