What steps should I take to repair the footer on this webpage?

Question

What steps should I take to repair the footer on this webpage?

Working on a footer using bootstrap and it's looking great, but I encountered an issue with blank space appearing at a specific resolution (see image below).

Bootstrap Footer:

https://i.sstatic.net/XifQe.png

My Footer Design:

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

footer{
 background: #333;
 color: #eee;
 font-size: 11px;
 padding: 20px;
}

Any suggestions on how to resolve this issue?

After trying nikhil's approach, this is the result:

attempt

html css bootstrap-4 footer

Answer 1

Answer №1

Unsure if this is what you're looking for, but one solution could be to insert style="min-height:100vh" into your content container and place the footer in a separate container.

By implementing this method, your footer will consistently remain at the bottom of your page layout.

Answer 2

Unsure if this is what you're looking for, but one solution could be to insert style="min-height:100vh" into your content container and place the footer in a separate container.

By implementing this method, your footer will consistently remain at the bottom of your page layout.

Answer 3

Answer №2

When using position fixed, the element is removed from the normal flow of content. To position the footer at the very bottom, you should use bottom: 0;.

.postion-b-0 {
  bottom: 0;
}

Your css code can be simplified to include only the property mentioned above.

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

In the code above, the columns take up half of the rows. If you want a full-width column on mobile, you can modify the code as shown below.

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-12 col-sm-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-12 col-sm-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

Answer 4

When using position fixed, the element is removed from the normal flow of content. To position the footer at the very bottom, you should use bottom: 0;.

.postion-b-0 {
  bottom: 0;
}

Your css code can be simplified to include only the property mentioned above.

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

In the code above, the columns take up half of the rows. If you want a full-width column on mobile, you can modify the code as shown below.

.postion-b-0 {
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-12 col-sm-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-12 col-sm-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

Answer 5

Answer №3

Try this solution:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: black;
                color: white;
                text-align: center;
            }
        </style>
    
    </head>
    
    <body>
    
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>Copyright &copy; 2018</h6>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>About us</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
                            ante, et sodales felis vulputate iaculis.</p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    
    </html>

fiddle:https://jsfiddle.net/rq3eab2v/2/

For those working with bootstrap 4, remember to use col-* instead of col-xs-* okay?

Answer 6

Try this solution:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: black;
                color: white;
                text-align: center;
            }
        </style>
    
    </head>
    
    <body>
    
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>Copyright &copy; 2018</h6>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>About us</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
                            ante, et sodales felis vulputate iaculis.</p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    
    </html>

fiddle:https://jsfiddle.net/rq3eab2v/2/

For those working with bootstrap 4, remember to use col-* instead of col-xs-* okay?

What steps should I take to repair the footer on this webpage?

Answer №1

Answer №2

Answer №3

Similar questions

Sorting feature fails to function properly when used in combination with pagination and

Obtain the index when clicked using jquery

Text cannot be highlighted within DIV element

Retrieving the width and height of a DIV element using Javascript

Refreshing the page after executing a MySQL UPDATE statement

Sending data from a JSP page to a JavaScript function

Trouble with displaying a CSS background image in Google Chrome on the Three.js birds demo

How can I create a thumbnail rectangle and wrap item text with Ionic framework?

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

Struggled to Find a Solution for Code Alignment

When using HTML select tags, make sure to submit the actual text of the selected option instead of just the value attribute

Screen white on the right side

Achieving the perfect overlay and centered image effect using CSS

Mastering the Art of Line Breaks in WordPress

Adjusting the height of the navigation bar in BootStrap

I am seeking a way for my menu to dynamically change depending on the specific view in React, without using reactdom.render

Having trouble getting CSS and Bootstrap to work in Laravel 5.8. Any suggestions on how to resolve this issue?

Changing the icon dynamically when a user unfollows through an AJAX request

Foundation and equalizer do not provide an optimal user experience

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide