CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designbootstrap-4
YourPalNurav
YourPalNurav

Reputation: 1310

How to align all rows to the bottom of a container in bootstrap (4.1)?

Setup:

  1. I have a container covering the whole viewport (height:100vh);
  2. Within this container I have 4 rows.

Required:

  1. I need all the rows at the bottom of the container.
  2. There should not be any spacing between the rows. (In short I need the whole page content aligned to the bottom of the screen. If any extra space remains it should remain at the top of the page.)

I tried using self-align-end but it applies only to columns within a row and not to the row within the container.

Thanks in Advance ;)

Snippet:

.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;/*optional*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Upvotes: 0

Views: 2117

Answers (2)

PTA
PTA

Reputation: 304

Add "d-flex align-content-end flex-wrap"

Try this.

/*
.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-content-end flex-wrap" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add Class this for container d-flex align-items-end

/*.row:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
}*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid bg-dark d-flex align-items-end" style="height: 100vh;">
  <div class="row bg-warning container-fluid no-gutters justify-content-start">
    This is Row 1
  </div>
  <div class="row bg-danger container-fluid no-gutters justify-content-center">
    This is Row 2
  </div>
  <div class="row bg-warning container-fluid no-gutters justify-content-end">
    This is Row 3
  </div>
  <div class="row bg-success container-fluid no-gutters justify-content-center">
    This is Row 4
  </div>
</div>

Upvotes: 1

Related Questions