Footer content could not set up exact center?

Question

I have tried to set up the bootstrap footer content at the center of the bottom. But unfortunately footer did not set up exactly center position . I have not figured out the errors. Please help me.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<footer class="container text-center"; style="position:absolute; bottom:0px; ">
 <p>This is my footer content</p>  
</footer>

you should add width:100% . – Ranjith v Aug 05 '19 at 07:00 — Ranjith v, Aug 05 '19 at 07:00

score 3 · Accepted Answer · answered Aug 05 '19 at 07:01

try this code

html

<!DOCTYPE html>
  <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   </head>
   <body>
     <footer class="container text-center"; style="position:absolute; bottom:0px; width:100%; ">
       <p>This is my footer content</p>  
     </footer>
   </body>
 </html>

why I add width:100%? Please explain it. – rashedcs Aug 05 '19 at 07:03 — rashedcs, Aug 05 '19 at 07:03
always html width generated auto. so we set width 100% – Ranjith v Aug 05 '19 at 07:06 — Ranjith v, Aug 05 '19 at 07:06

Sunil R. · Answer 2 · 2019-08-05T07:23:46.753

Add This, if you don't want use width:100%; use left:0px; and right:0px;

 footer{
        position:absolute;
        bottom:0px;
        text-align:center;
        width:100% !important; /** Because of your are using position for center text so width are necessary positioning **/
    }

<!DOCTYPE html>
  <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   </head>
   <body>
     <footer class="container">
       <p>This is my footer content</p>  
     </footer>
   </body>
 </html>

score 1 · Answer 3 · answered Aug 05 '19 at 07:41

I would suggest to aplly width:100% to the container like @Ranjith solution, but for understanding it:

By default, when you apply position: absolute to an element, it's width become the width of it's content. You can read more about it here. That make it can not align the text content since there is no space left in the element

And it important to know that Bootstrap container class have a fixed width on each responsive breakpoints. So the text is aligned but based on the container class defined width.

So apply width:100% make the <footer> expand to the rear of it container(in this case is the <body> element), then it have enough space for the text to be aligned.

Footer content could not set up exact center?

3 Answers3