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>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </div>

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

You may like these posts

Post a Comment for "Put Footer Content In Columns"