CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Aaaaaaaa
Aaaaaaaa

Reputation: 2114

Website footer with poor Bootstrap

I wand to create a footer with links and with copyright info at the end:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BlaBla</title>
        <link href="bootstrap.css" rel="stylesheet"/>
    
    </head>
    <body>
        <div class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <label class="navbar-brand" for="BlaBla">BlaBla</label>
                </div>
            </div>
        </div>
    
        <div class="container body-content">
            
            <hr />
            <footer>
                <nav class="navbar navbar-inverse" role="navigation">
                    <div>
                        <ul class="nav navbar-nav">
                            <li><a href="CorporateInformation.html">Corporate Information</a></li>
                            
                            <li><a href="PrivacyPolicy.html">Privacy Policy</a></li>
                            <li><a href="CookiePolicy.html">Cookie Policy</a></li>
                            <li><a href="Help.html">Help</a></li>
                            <li>&copy; BlaBla 2016 All Rights Reserved</li>
                        </ul>
                    </div>
                </nav>
            </footer>
        </div>
    </body>
    </html>

But here the copyright is shown on the top of the navbar, and it is dark grey, not light gray, and I did not find any Bootstrap class.

enter image description here

I do not want to use the style HTML attribute, I want to solve it with pure Bootstrap. Is there any solution?

Upvotes: 1

Views: 544

Answers (3)

Elias Kosunen
Elias Kosunen

Reputation: 433

You may want to use the class navbar-text.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
    </ul>
    <p class="navbar-text">
      Text
    </p>
  </div>
</nav>

https://jsfiddle.net/t2rrgynf/

Upvotes: 1

Vucko
Vucko

Reputation: 20844

Use it like:

<ul>...</ul>
<p class="navbar-text pull-right">&copy; BlaBla @DateTime.Now.Year All Rights Reserved</p>

Bootply

To "...copyright info at the end" - use .pull-right class, which is basically float: right.

And to color the text, use .navbar-text class.

Upvotes: 3

Jo&#227;o Reis
Jo&#227;o Reis

Reputation: 131

I think is this what you want.

<footer class="footer navbar-fixed-bottom">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

Upvotes: 1

Related Questions