Creating a 3 col footer not happening

HTML & CSS
9

Hi,

I feel this may end up as using a band-aid for a broken leg but here are a few fixes.

Firstly your page content isn’t matching the width of your wrapper so you need to sort that first.

Add this at the end of your css files or manually adjust correctly in source:

#content.fullwidth{width:auto}

As Ron said above the bootstrap footer you added is meant for bootstrap pages and you have added a whole framework just to add a footer that could have been added with a few lines of html and css. Assuming you have other needs for bootstrap here are some extra fixes to get you on the right track.

Add these rules after all your css files including any linked bootstrap files.

#content .footer-header{text-align:center;margin:0;padding:2em 0 0;}
#content ul{margin:0 0 0 1em;padding:0 0 0 2em;text-align:left;}
#content h5{text-align:center;margin:2em 0 .5em}

You will also need to amend the html of the footer to look like this and have these extra classes added.

<footer id="myFooter">
  <h4 class="footer-header">Suburbs We Visit Regularly</h4>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 myCols">
        <h5>&nbsp;</h5>
        <ul>
          <li><a href="#">Perth</a></li>
          <li><a href="#">Hillarys</a></li>
          <li><a href="#">Marmion</a></li>
          <li><a href="#">Trigg</a></li>
          <li><a href="#">Mullaloo</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>&nbsp;</h5>
        <ul>
          <li><a href="#">Ocean Reef</a></li>
          <li><a href="#">Whitfords</a></li>
          <li><a href="#">Edgewater</a></li>
          <li><a href="#">Kingsley</a></li>
          <li><a href="#">Heathridge</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>&nbsp;</h5>
        <ul>
          <li><a href="#">Joondalup</a></li>
          <li><a href="#">Scarborough</a></li>
          <li><a href="#">City Beach</a></li>
          <li><a href="#">Karrinyup</a></li>
          <li><a href="#">Warwick</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>Legal</h5>
        <ul>
          <li><a href="#">Terms of Service</a></li>
          <li><a href="#">Terms of Use</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="social-networks"> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="facebook"><i class="fa fa-facebook-official"></i></a> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> </div>
  <div class="footer-copyright">
    <p>© 2018 Copyright Text </p>
  </div>
</footer>

Note that I moved the p tag you had with the heading text and moved it to a correct place and a correct heading tag. You are not allowed in bootstrap to add html inside a row that is not a column class because that is the basis of how bootstrap works. Please read the documentation in full before using bootstrap. It is not a plugin and go system but a framework with specific rules that need to be learned in detail before it can be applied properly. However you would be better off to understand html and css a little more fully first and in consequence would most likely not need the added cost of the bootstrap framework.:slight_smile:

Also validate your css regularly to avoid problems . You have a missing bracket here after the rules for the h4 (line 386) which relegates all your other footer styles null and void.

h4 {
	margin-bottom: 10px;
	font: 'DINNextRegular',Arial,sans-serif;
	font-size: 14px;
	font-weight: 450;	
	color: #ff9804;
	
}/*  this bracket is missing */

As I said above you don’t need a framework just to add 4 columns across unless you are adding that framework for other more important reasons.

3 Likes