CODEWITHSUNDEEP
htmlbootstrap-4
Zeno Dalla Valle
Zeno Dalla Valle

Reputation: 919

Bootstrap div not placing as expected

I have a 'right-float' classed div placed inside a 'w-100' classed div. Inside the right-floated div I want to display at the top a button with 3 points inside (...) and at the bottom another Icon (see images below). So I added 'h-100' class to the float-right div and created two divs inside it: the first one with the ... button inside and the second one with 'align-bottom' class.
Problem
the second div does not stay at the bottom, I think because h-100 is not working as expected
Observed behaviour
Observed behaviour
Expected behaviour
Expected behaviour
HTML Tree
HTML Tree
Example snippet

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
  <div class="clearfix w-100 border border-primary">
    <div class="float-right h-100">
      <div class="clearfix">
        <div class="float-right">
          <button class="btn btn-sm btn-primary">...</button>
        </div>
      </div>
      <div class="align-bottom clearfix">
        <div class="float-right">
          <button class="btn btn-sm btn-primary">BTN2</button>
        </div>
      </div>
    </div>
    <div>
      <div>FOO</div>
      <div>FOO2</div>
      <div>FOO3</div>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Views: 32

Answers (1)

julianstark999
julianstark999

Reputation: 3616

h-100 is working as expected, because the height is 100% of the childs inside. It is not usable to stretch a div to its parent height.

You could use flex, to make it work right

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>
        <div class="d-flex align-items-stretch border border-primary">
            <div class="flex-grow-1">
                <div>FOO</div>
                <div>FOO2</div>
                <div>FOO3</div>
            </div>
            <div class="d-flex flex-column bg-danger">
                <div class="flex-grow-1">
                    <button class="btn btn-sm">...</button>
                </div>
                <div>
                    <button class="btn btn-sm">BTN2</button>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 3

Related Questions