Twitter Bootstrap Question posted in

How do I move this footer to the bottom?-Twitter bootstrap

I have this footer I’m working on, and I just can’t figure out how to move it to the bottom,
can somebody help me please??
Thank you
I tried changing the top value in CSS, etc
nothing has worked so far

.footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}
<head>
    <meta charset="utf-8"> <!-- dont copy -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- dont copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  <!-- copy -->
    <link rel="stylesheet" href="assets/css/style.css">  <!-- dont copy -->
</head>

<div class="container">
  <div class="child">
    <div class="footer-dark">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3 item">
                        <h3>Products</h3>
                        <ul>
                            <li><a href="#">Ɀinexium Exploit</a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                  </div>
                    <div class="col-md-6 item text">
                        <h3>Ɀinexium</h3>
                        <p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and it's completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                    </div>
                    <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                </div>
                <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
            </div>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </div>
  </div>



<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->
Tags:

4

Answers


  1. 0

    Replace the contents of child class with below style will do that

    .child {
  ... 
   position: fixed;
   width: 100%;
   left: 0;
}
    Login or Signup to reply.
  2. 0

    Here is the code I modified to get the result.
    Solution was adding

    bottom: 0px;
position: absolute;

    Complete Code

        <HTML>
<HEAD>
    <style type="text/css">
        .footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;

}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.footer_container{
      bottom: 0px;
    position: absolute;
}
    </style>

    <meta charset="utf-8"> <!-- dont copy -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- dont copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  <!-- copy -->
</HEAD>
<BODY>
    <div class="container footer_container">
  <div class="child">
    <div class="footer-dark">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3 item">
                        <h3>Products</h3>
                        <ul>
                            <li><a href="#">Ɀinexium Exploit</a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                  </div>
                    <div class="col-md-6 item text">
                        <h3>Ɀinexium</h3>
                        <p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and its completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                    </div>
                    <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                </div>
                <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
            </div>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </div>
  </div>
</BODY>
</HTML>
    Login or Signup to reply.
  3. 0

    Hello try to add this and check this https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    body {
    display: flex; /* This defines a flex container */
    flex-direction: column; /* defining the direction flex items are placed in the flex container */
    height: 100%;
}

.content {
    flex: 1 0 auto; /* This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The default is 0 1 auto */
}

footer {
    flex-shrink: 0; /* This defines the ability of a flexible article to shrink if necessary. */
    margin-top: 80px;
}

.footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  align-items: stretch;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  height: 100%;
}

    <html>
    <head>

    </head>

    <body>
        <div class="content">
            <div class="container">

            </div>
        </div>

        <footer>
            <div class="footer-dark">
                <footer>
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-3 item">
                                <h3>Products</h3>
                                <ul>
                                    <li><a href="#">Ɀinexium Exploit</a></li>
                                    <li><a href="#"></a></li>
                                    <li><a href="#"></a></li>
                                </ul>
                        </div>
                            <div class="col-md-6 item text">
                                <h3>Ɀinexium</h3>
                                <p>Welcome to Ɀinexium, your #1 source for free exploits!
                                We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and its completely free!
                                Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                            </div>
                            <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                        </div>
                        <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
                    </div>
                </footer>
            </div>
        </footer>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
    Login or Signup to reply.
  4. 0

    As you can see there is not much content to cover the full viewport. So to cover the full screen you have to give body height must be minimum 100vh like this:

    body {
   min-height: 100vh;
}
body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}

    See full snippet below.

    body{
  min-height: 100vh;
}

body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}
    <head>
    <meta charset="utf-8"> <!-- dont copy -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- dont copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  <!-- copy -->
    <link rel="stylesheet" href="assets/css/style.css">  <!-- dont copy -->
</head>

<div class="container">
  <div class="child">
    <div class="footer-dark">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3 item">
                        <h3>Products</h3>
                        <ul>
                            <li><a href="#">Ɀinexium Exploit</a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                  </div>
                    <div class="col-md-6 item text">
                        <h3>Ɀinexium</h3>
                        <p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and its completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                    </div>
                    <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                </div>
                <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
            </div>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </div>
  </div>



<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search