Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Put Footer Content In Columns

Post a Comment
Hello I am currently trying to make a footer for my website I write this code and everything works fine except the fact that the second row is under the first row and half of the

Solution 1:

I believe you are using bootstrap so no need for fancy css, this html will do the trick for you.

But be aware that when the screen is smaller that x pixels ( I believe 376px but not sure) the two columns will overlap each other.

<!DOCTYPE html><html><head><scriptsrc="https://code.jquery.com/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><divclass="footer"><divclass="container"><divclass="row"><divclass="col-sm-6"><h4>Links</h4><li><ahref="index.html">Home</a></li><li><ahref="courses.html">Courses</a></li><li><ahref="sign-up.html">Sign Up</a></li><li><ahref="log-in.html">Log In</a></li><li><ahref="help.html">Help</a></li></div><divclass="col-sm-6"><h4>Social Media</h4><li><ahref="#">Facebook</a></li><li><ahref="#">Twitter</a></li><li><ahref="#">Youtube</a></li><li><ahref="#">Instagram</a></li></div></div></div></div></body></html>

Solution 2:

you may use flex like this:

.footer.container{
    display: flex;
    justify-content: space-between;
}

See it in action

.footer{
  padding: 20px0;
  background-color: #CDCDEF;
}
.footer.container{
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.footer.container.rowul{
  list-style: none;
}
<divclass="footer"><divclass="container"><divclass="row"><ulclass="col-md-6"><li><h4>Links</h4></li><li><ahref="index.html">Home</a></li><li><ahref="courses.html">Courses</a></li><li><ahref="sign-up.html">Sign Up</a></li><li><ahref="log-in.html">Log In</a></li><li><ahref="help.html">Help</a></li></ul><divclass="col-md-6"></div></div><divclass="row"><ulclass="col-md-6"><li><h4>Social Media</h4></li><li><ahref="#">Facebook</a></li><li><ahref="#">Twitter</a></li><li><ahref="#">Youtube</a></li><li><ahref="#">Instagram</a></li></ul></div></div></div>

Post a Comment for "Put Footer Content In Columns"