problem with Bootstrap footer generating an horizontal bar

Question

I have this simple Bootstrap footer grid https://www.codeply.com/p/3WPEe7KAUK

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <!-- foooter -->
    <footer style="background-color: #0198d1;">
    <div class="row">
    <div class="col-4" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-center" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    <div class="col-4 text-right" style="background-color: #0198d1;">
    <span>test</span>
    </div>
    </div>
    </footer>
    <!-- END foooter -->

I do not understand why it activates the browser horizontal scroolbar and how to remove it.

consider green tick if helps. – Ahmed Ali Feb 26 '20 at 09:26 — Ahmed Ali, Feb 26 '20 at 09:26
use `html { overflow-x: hidden; }` in your style – Ramin eghbalian Feb 26 '20 at 09:28 — Ramin eghbalian, Feb 26 '20 at 09:28

score 1 · Answer 1 · answered Feb 26 '20 at 09:24

1

I found also another solution

<div class="container-fluid" >
...
</div>

answered Feb 26 '20 at 09:24

gr68

420
1
10
25

1

@AhmedAli this is *the* solution. row should be inside container and col inside row – Temani Afif Feb 26 '20 at 09:33

score 0 · Accepted Answer · answered Feb 26 '20 at 09:23

It is because you aren't declaring width of row, So I have added col-12 to row then others div set them according to there parent div neither overflow it;
It can be done like this.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer class="col-12">
  <div style="background-color: #0198d1;" class="row">
                <div class="col-4" style="background-color: #0198d1;">      <span>test</span>
                </div>
                <div class="col-4 text-center" style="background-color: #0198d1;">
                    <span >test</span>
                </div>
                <div class="col-4 text-right" style="background-color: #0198d1;">
                    <span>test</span>
                </div>
        </div>
     </footer>

while this works, it's not correct because col need to always be inside row. — Temani Afif, Feb 26 '20 at 09:36

score -1 · Answer 3 · answered Feb 26 '20 at 09:31

Overwrite the negative margin from <div class="row"> to 0px

Problem:

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px; 
    margin-left: -15px; 
}

Solution

.row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 0px!important; 
        margin-left:  0px!important; 
    }

problem with Bootstrap footer generating an horizontal bar

3 Answers3