CODEWITHSUNDEEP
csstwitter-bootstrap
user70192
user70192

Reputation: 14204

Aligning Footer Content

I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:

+-----------------------------------------------------------------+
| Hello               Thank you for visiting               [logo] |
+-----------------------------------------------------------------+

Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:

<nav class="navbar navbar-static-top navbar-dark bg-inverse">
  <span class="navbar-brand">Hello</span>
  <span class="center-block"><span class="center-text">Thank you for visiting</span></span>
  <span class="pull-right"><div class="pull-right">[logo]</div></span>                  
</nav>

Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.

I'm not sure what I"m doing wrong.

Upvotes: 0

Views: 42

Answers (2)

Vinay Ranjan
Vinay Ranjan

Reputation: 294

Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.

    <footer class="navbar navbar-static-bottom navbar-default">
              <div class="container" style="width">
                <div class="navbar-header">
                  <div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
                    Hello
                  </div>
                </div>
                <div class="navbar-header">
                  <div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
                    Welcome to my website
                  </div>
                </div>
                   <div class="navbar-header navbar-right">
                  <div class="navbar-brand">
                    Logo goes here
                  </div>
                </div>
              </div>
            </footer>

Enjoy....!

Upvotes: 0

Tushar Khatiwada
Tushar Khatiwada

Reputation: 2027

I'm not sure why you are using nav but this solution might work for you:

<div class="container">
    <div class="row">
        <div class="col-sm-4 text-left">
            <p>Hello</p>
        </div>
        <div class="col-sm-4 text-center">
            <p>Thank you for visiting</p>
        </div>
        <div class="col-sm-4 text-right">
            <p>[logo]</p>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions