Twitter Bootstrap Question posted in

CSS white space between footer and content-Twitter bootstrap

So i have a footer template i want to use but when I add the content between the footer and the header I am left with a white space between the footer and the content. what could be the problem I haven’t used any margins on the elements.
HTML
Head

<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4 Navbar</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter- 
 bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css">

</head>

Header

<header>
<!--- Navbar --->
<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand text-white" href="#"><i class="fa fa-graduation-cap fa-lg mr-2"></i>BLOG</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvbCollapse" aria-controls="nvbCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nvbCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-home fa-fw mr-1"></i>Anasayfa</a>
                </li>
                <li class="nav-item active pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-th-list fa-fw mr-1"></i>Blog</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-info-circle fa-fw mr-1"></i>Hakkımızda</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-phone fa-fw fa-rotate-180 mr-1"></i>İletişim</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-user-plus fa-fw mr-1"></i>Kayıt Ol</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-sign-in fa-fw mr-1"></i>Oturum Aç</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--# Navbar #-->
</header>

Footer

<footer>
    <div class="jumbotron jumbotron-fluid bg-secondary p-4 mt-5 mb-0">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 cizgi">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-light text-center">
                            <h5 class="card-title text-white display-4" style="font-size:30px">Telif Hakkı</h5>
                        <p class="d-inline lead">Tüm Hakları Saklıdır © 2018<br>
                        <a href="#" class="text-light d-block lead">Blog</a>
                        </p>

                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 cizgi">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-center">
                            <h5 class="card-title text-white display-4" style="font-size:30px">İletişim</h5>
                            <a class="text-light d-block lead" style="margin-left: -20px" href="#"><i class="fa fa-phone mr-2"></i>+90 (000) 000 0 000</a>
                            <a class="text-light d-block lead" href="#"><i class="fa fa-envelope mr-2"></i>[email protected]</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-center">
                        <h5 class="card-title text-white display-4" style="font-size:30px">Sosyal Medya</h5>
                
                                <a class="text-light" href="#"><i class="fa fa-facebook-square fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-twitter-square fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-instagram fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-linkedin fa-fw fa-2x"></i></a>
                            
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</footer>

and the css

.navbar { background-color: #484848; }
.navbar .navbar-nav .nav-link { color: #fff; }
.navbar .navbar-nav .nav-link:hover { color: #fbc531; }
.navbar .navbar-nav .active > .nav-link { color: #fbc531; }

footer a.text-light:hover { color: #fed136!important; text-decoration: none; }
footer .cizgi { border-right: 1px solid #535e67; }
@media (max-width: 992px) { footer .cizgi { border-right: none; } }

and that’s what shows on my browser
enter image description here

This white space stays there no matter what I add between the header and footer any ideas ?

added simple text to demonstrate the white space
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Nevermind i found what was causing it the boostrap template i used had the attribute mt-5 added to the footer class which is a boostrap attribute that adds top margin to the element changing it to mt-0 fixed it for me.


  2. 0

    i was about to answer the same <div class="jumbotron jumbotron-fluid bg-secondary p-4 mb-0">

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search