CODEWITHSUNDEEP
javascripthtmlbootstrap-4
Jason
Jason

Reputation: 95

Uniform vertical stretch single column contents in bootstrap

I'm trying to get several buttons to vertically stretch to the size of the container, but I can't figure out how I did it before. I've tried all of the possibilities on https://getbootstrap.com/docs/4.0/utilities/flex/ (like align-items-stretch, align-self-stretch, align-content-stretch, but none seem to do anything for single column vertical stretching, at least how I implemented them. How is it done? Thanks!

(https://codepen.io/jasonws/pen/poyYMpz)

<div class="container mt-3">
  <div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
    <button type="button" class="btn btn-primary my-1">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1">Flex item 3</button>
  </div>
</div>

Upvotes: 0

Views: 186

Answers (1)

Mehedi Hasan Siam
Mehedi Hasan Siam

Reputation: 1272

Just remove the other things from your d-flex class

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
  <div class="border" style="display: grid">
    <button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
  </div>
</div>

Upvotes: 1

Related Questions