At the moment, MyPhoto only contains a placeholder in place of a useful footer. Before MyPhoto goes live, it will desperately need a footer that should contain at least three pieces of information:

Let's go ahead and modify our footer to include these three pieces of information:

    <footer class="footer">
        <p class="text-muted">&copy; MyPhoto Inc.</p>
        <p class="text-muted">Terms &amp;Conditions</p>
        <p class="text-muted">About Us</p>
    </footer> 

Now open styles/myphoto.css and insert the following CSS:

    footer p {
        display: inline;
    }

So, what exactly did we just do? We inserted our copyright notice, and some placeholder text for our Terms and Conditions and About Us link. We embedded each of these three texts inside a paragraph element and applied Bootstrap's text - muted context class. The text - muted class does precisely what its name implies. It attempts to mute anything containing text by setting the foreground color to #777 (a very soft, light grey). Take a look at the following screenshot:

Figure 4.11: Our footer text: Copyright notice, Terms & Conditions, and About Us

Save and refresh (see Figure 4.11). Our footer is already looking better, however, unfortunately the text is somewhat obtrusive. Go ahead and make it smaller:

    

    <footerclass="footer">
        <p class="text-muted"><small>&copy; MyPhoto Inc.</small></p>
        <p class="text-muted"><small>Terms &amp; Conditions</small></p> 
        <p class="text-muted"><small>About Us</small></p>
    </footer>

Now center the text by applying Bootstrap's text - xs - center context class (recall from Chapter 3, Building the Layout that the text - xs - center will center align text on viewports of size xs or wider):

    <footer class="footer text-xs-center">
        <p class="text-muted"><small>&copy; MyPhoto Inc.</small></p>
        <p class="text-muted"><a href="#"><small>Terms &amp;Conditions</small>
        </a></p>
        <p class="text-muted"><a href="#"><small>About Us</small></a></p>
    </footer>

Last but not least, we first space the individual paragraphs out by adding a left margin of 10 pixels to each paragraph, and then adjust the foreground color of our footer's links:

    footer p {
       display: inline;        
       margin-left: 10px;
    }
    footer a {
        color: inherit ;
    }

Figure 4.12: Our completed footer

      @media (min-width: 544px) {
          text-sm-left {
          text-align: left !important;
      }
          .text-sm-right {
          text-align: right !important;
      }
          .text-sm-center {
          text-align: center !important;
      }
      }