'moving last row to bottom of container in bootstrap 4

I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container. So what I did was using an absolute positioning:

footer .verybottom {
  position: absolute;
  bottom: 0px;
  background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
  <div class="container">
    <div class="row">
      <div class="col md-12">
        <h2>Contact</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        Adress
      </div>
      <div class="col-md-6">
        something else
      </div>
    </div>
    <div class="row verybottom">
      <div class="col-md-6">
        some more Text
      </div>
      <div class="col-md-6">
        some more Text
      </div>
    </div>
  </div>
</footer>

The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?

csstwitter-bootstrapbootstrap-4


Solution 1:[1]

You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work

working snippet:

footer .verybottom {
  position: absolute;
  bottom: 0px;
  background-color: grey;
  padding-left: -15px;
}

.row {
  border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<footer id="kontakt">
  <div class="container">
    <div class="row">
      <div class="col md-12">
        <h2>Contact</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        Adress
      </div>
      <div class="col-md-6">
        something else
      </div>
    </div>
    <div class="row">
      <div class="container verybottom">
        <div class="row">
          <div class="col-md-6">
            some more Text
          </div>
          <div class="col-md-6">
            some more Text
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akber Iqbal

Related Questions