CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dyon
Dyon

Reputation: 195

Mysterious whitespace using Bootstrap

Im Using Bootstrap right now. As soon as i go into mobile mode i have some whitespaces (colour of the body) between some of the divs.

HTML:

<div class="container-fluid">
    <div class="col-md-12 winter" style="padding-top: 120px;">
        <h1>Hallo</h1>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
    <div class="col-md-12 winter centerText whiteText">
        <h3>Teil 2</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

CSS:

.winter {
    background-color: #c8e2d2;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 100%;

}

The Bootstrap is unchanged. As soon as i go mobile-mode there is a whitespace between both "col-md-12 winter"-Divs. Does anybody have an idea? All the other classes cant have an effect, they only change the text-color or alignment.

Greetings

Upvotes: 0

Views: 83

Answers (1)

Anand G
Anand G

Reputation: 3210

The problem is h3 tag, which has default top margin, try below 

.winter {
    background-color: #c8e2d2;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 100%;

}
.winter h3 {
    margin:0;
}
<div class="container-fluid">
    <div class="col-md-12 winter" style="padding-top: 120px;">
        <h1>Hallo</h1>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
        <div class="col-md-12 winter centerText whiteText">
            <h3>Teil 2</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>

Upvotes: 3

Related Questions