Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74325

How to set mid and bottom text in bootstrap with grids

$
0
0

I have been trying to find a solution for it here, searching, etc, but nothing seems to work. Basically im trying to set the footer using grids in bootstrap but I cant figure it out how to set the class link-footer in the middle height of the div of the footer and the footer-copyright class just to send it to the bottom. Here is the idea: https://prnt.sc/q8abeb

I share with you the code clean:

<footer class="page-footer">
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col-4 col-footer">
        <h1>aloha name</h1>
      </div>

      <div class="col-2 link-footer">
        <a href="#" class="text-uppercase">home</a>
      </div>
      <div class="col-2 link-footer">
        <a href="#" class="text-uppercase">about me</a>
      </div>
      <div class="col-2 link-footer">
        <a href="#" class="text-uppercase">projects</a>
      </div>
      <div class="col-2 link-footer">
        <a href="#" class="text-uppercase">contact</a>
      </div>

    </div>
  </div>

  <div class="footer-copyright text-center">© 2020 Copyright:
    <span>aloha</span>
  </div>
</footer>

I add the CSS but is not too much actually

footer {
background-color: #545454;
height: 200px;
}

.col-footer h1 {
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size:2em;
color:white;
}

.link-footer a {
font-size:1em;
color:white;
font-weight: 600;
text-decoration: none;
}

.link-footer a:hover {
color:#4860FF;
}

.footer-copyright {
background-color: #3b3b3b;
color: #838383;

}

.footer-copyright span{
color: white;
}

I have tried adding margin, bottom, py, my, my-auto, etc and nothing works. Any idea??


Viewing all articles
Browse latest Browse all 74325

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>