Question 61286 in Twitter Bootstrap Question posted in

How to remove the white space after footer?-Twitter bootstrap

There is a white space gap at the bottom of mine webs

Header and CSS#

This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website

This is mine header i using bootstrap and there got a white space in
the bottom of mine website

This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>We CARE for your health</title>
    <link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Online Clinic</title>
    <link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
    
    <!--For home page's below slider's content-->
    
    <!--For home page's below slider's content-->
    
    
    <style> 
    
    /*The control button to black color*/
    .carousel-control-next,
    .carousel-control-prev /*, .carousel-indicators */ {
        filter: invert(100%);
    }
    
    /*For home page's below slider's content*/
    .how-section1{
        margin-top:-15%;
        padding: 10%;
    }
    .how-section1 h4{
        color: #ffa500;
        font-weight: bold;
        font-size: 30px;
    }
    .how-section1 p{
        text-align: justify;
      text-justify: inter-word;
    }
    .how-section1 .subheading{
        color: #3931af;
        font-size: 20px;
    }
    .how-section1 .row
    {
        margin-top: 10%;
    }
    .how-img 
    {
        text-align: center;
    }
    .how-img img{
        width: 70%;
    }
    .lastImg img{
        width: 80%;
    
    }
    /*For home page's below slider's content*/
    .foot {
       position: fixed;
       bottom: 0;
       width: 100%;
       height: 70px;   /* Height of the footer */
       background: white;
    }
    
    </style>

# Body#

    <body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
    <div class="m-0">
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light"  >
        <img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav ">
                        <a href="<?= base_url('Home')?>" class="nav-item nav-link active px-5"><b>Home</b></a>
                        <a href="#" class="nav-item nav-link px-5"><b>Profile</b></a>  
                        <a href="#" class="nav-item nav-link px-5"><b>Messages</b></a>
                        <a href="#" class="nav-item nav-link px-5" tabindex="-1"><b>Reports</b></a>
                    </div>
                    <div class="navbar-nav ms-auto">
                        <a href="<?= base_url('Auth')?>" class="nav-item nav-link px-5"><b>Login</b></a>
                    </div>
                </div>
            </div>
        </nav>
    </div>

Footer#

<div class="foot">
<footer  class="text-center text-black position-relative" style="background-color:white">
            <div class="social">
                <a href="#"><i class="icon ion-social-instagram px-5"></i></a>
                <a href="#"><i class="icon ion-social-snapchat px-5"></i></a>
                <a href="#"><i class="icon ion-social-twitter px-5"></i></a>
                <a href="#"><i class="icon ion-social-facebook px-5"></i></a></div>
                <br>
            <ul class="list-inline">
                <li class="list-inline-item px-3"><a href="#">Home</a></li>
                <li class="list-inline-item px-3"><a href="#">Services</a></li>
                <li class="list-inline-item px-3"><a href="#">About</a></li>
                <li class="list-inline-item px-3"><a href="#">Terms</a></li>
                <li class="list-inline-item px-3"><a href="#">Privacy Policy</a></li>
            </ul>
            <p class="copyright text-center">Mediklinik Kampar © 2022</p>
        </footer>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

</body>
</html>
Tags:

2

Answers


  1. 0

    you can fix the issue by yourself by right clicking on the page and select Inspect option.

    Login or Signup to reply.
  2. 0

    You can solve your problem like this way,

      <body>
    <main></main>   
    <footer>
      <span>This is a footer</span>
    </footer>
  </body>

    Step 1: Set your body min-height: 100vh; and position: relative;
    Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;

    Here is the css,

    body {
  margin: 0;
  min-height: 100vh;
  position: relative;
}

footer {
   width: 100%;
   background: lightgray;
   text-align: center;
   padding: 1rem 0;
   position: absolute;
   bottom: 0;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search