CODEWITHSUNDEEP
htmlcssbootstrap-4gridheight
Mankind1023
Mankind1023

Reputation: 7732

Bootstrap 4 div height not expanding to fit content

I'm using bootstrap 4 in an angular app to try and create a grid with several nested boxes, the second column has 2 rows, the bottom one needs to always vertically align to the bottom, ideally it should look like this: enter image description here

(I achieved this by adding a bunch of br tags)

However, inreality the contect overlaps it it is small and looks like this: enter image description here

Here is the css I use to align the bottom div:

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
      <div class="col-2 p-2">
        ABC123<br> Text
        <br> More Text
      </div>

      <div class="col-5 border-right border-left border-secondary">
        <div class="col-12 p-2">
          <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br> This is a fake text<br>This is a fake text<br>This is a fake text<br>This is a fake text<br>
        </div>
        <div class="col-12 border-top border-secondary bottom">
          <div class="row">
            <div class="col-4 p-2">bottom-align</div>
            <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
            <div class="col-4 p-2">bottom-align</div>
          </div>
        </div>
      </div>
      <div class="col-3 p-2 border-right border-secondary">Test</div>
      <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>

So far everything I have tried has failed, please advise.

Thanks

Upvotes: 3

Views: 11152

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362700

No extra CSS is needed. Use the Bootstrap utilility classes to make the inner row 'h-100' and then 'mt-auto' to push the content to the bottom...

           <div class="col-5 border-left border-right border-secondary">
                  <div class="row h-100">
                        <div class="col-12 p-2">
                            <a [routerlink]="['/tickets', ticket.id]">Lorem Ipsum</a>
                            <br> This is a fake text
                            <br>This is a fake text
                            <br>This is a fake text
                            <br>This is a fake text
                        </div>
                        <div class="col-12 border-top border-secondary mt-auto">
                            <div class="row">
                                <div class="col-4 p-2">bottom-align</div>
                                <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
                                <div class="col-4 p-2">bottom-align</div>
                            </div>
                        </div>
                  </div>
           </div>

https://www.codeply.com/go/rxzugvCk80

Upvotes: 1

Arpita Patel
Arpita Patel

Reputation: 350

you remove css :

.bottom {
    position:absolute;
    bottom:0;
    left:0;
}

and replace with shown in example: add the display class. and also add the container-fluid class for look as result.

.display{
  display:flex;
  flex-direction: column;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid">
<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
        <div class="col-2 p-2 ">
            ABC123<br>
            Text<br>
            More Text
        </div>

        <div class="col-5 border-right border-left border-secondary bootom">
          <div class="row">
          <div class="col-12 p-2 display">
              <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a>
              <span>This is a fake text</span> 
<span>This is a fake text</span> 
<span>This is a fake text</span>
            
          </div>
          <div class="col-12 border-top border-secondary bottom">
              <div class="row">
                <div class="col-4 p-2">bottom-align</div>
                <div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
                <div class="col-4 p-2">bottom-align</div>
              </div>
          </div>
          </div>
        </div>
        <div class="col-3 p-2 border-right border-secondary">Test</div>
        <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>
   </div>

Upvotes: 0

PR7
PR7

Reputation: 1914

I tried to replicate it, using flex instead of <br> tag. Is this what you are looking to achieve ?

.text-container {
  display: flex;
  flex-direction: column;
}
<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

<div class="row">
  <div class="col-12 mb-3 border border-secondary rounded">
    <div class="row">
      <div class="col-2 p-2">
        ABC123<br />
        Text<br />
        More Text
      </div>

      <div class="col-5 border-right border-left border-secondary p-0">
        <div class="col-12 p-2 text-container">
          <a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br />
          <span>This is a fake text</span>             
        </div>
        <div class="col-12 border-top border-secondary bottom">
          <div class="row">
            <div class="col-4 p-2">bottom-align</div>
            <div
              class="col-4 p-2 border-left border-right border-secondary"
            >
              bottom-align
            </div>
            <div class="col-4 p-2">bottom-align</div>
          </div>
        </div>
      </div>
      <div class="col-3 p-2 border-right border-secondary">Test</div>
      <div class="col-2 p-2 text-center">Test</div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions