CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Jackal
Jackal

Reputation: 3521

Place button on bottom of a div

I am using bootstrap 4.5 but this is just a quick example of what i want.

I have a card with some fixed width and height, I want content to take over all the remaining space while the button is always on the bottom. How can I achieve this?

<html>
<body>

<div style="width:400px; height:704px; background-color:gray;">

<div class="container" style="width:100%; height:100%;">

    Some content
    <button>Some Button</button>
</div>


</div>

</body>
</html>

Upvotes: 2

Views: 1703

Answers (7)

prime
prime

Reputation: 15574

Try something like,

position:absolute will absolutely position an element within a parent div.

.bttn {
        position: absolute;
        right:    50%;
        bottom:   0;
}

.cont {
        position: relative;
}
<html>
<body>

<div style="width:400px; height:154px; background-color:gray;">

    <div class="container cont" style="width:100%; height:100%;">
        Some content
        <button class="bttn">Some Button</button>
    </div>

</div>

</body>
</html>

Upvotes: 2

MrAmazing
MrAmazing

Reputation: 51

The easiest way to accomplish this is by using Flexbox with a wide range of support across browsers. https://caniuse.com/#feat=flexbox.

More specifically we will be focusing on flex-grow. Flex-grow will allow us to use up all available space between components on our page.

The Bootstrap Way

(Edit: The way Abishek is using Bootstrap cards above is the best bootstrap solution specifically tailored to cards: https://stackoverflow.com/a/63022092/6871408)

You can learn more about bootstrap and flex-grow here. https://getbootstrap.com/docs/4.1/utilities/flex/#grow-and-shrink

.container {
  background-color: #ccc;
}
.container button {
  background-color: #777;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex flex-column" style="width: 200px; height: 400px;">
  <div class="flex-grow-1">Hello World!</div>
  <button>Button</button>
</div>

The Plain Html/CSS Way

.container {
  width: 200px;
  height: 400px;
  display: flex;
  flex-flow: column;
  background-color: #ccc;
}
.content {
  flex-grow: 1;
}
.container button {
  background-color: #777;
}
<div class="container">
  <div class="content">
    Hello World!
  </div>
  <button>Button</button>
</div>

Upvotes: 0

Michael Chon
Michael Chon

Reputation: 142

You can put content in another div and use CSS flexbox to do this

HTML:

<div style="width:400px; height:704px; background-color:gray;">

<div class="container my-container" style="width:100%; height:100%;">
    <div class="content">Some content</div>
    <button>Some Button</button>
</div>

CSS:

.my-container {
  display: flex; /* add flex to container */
  flex-flow: column nowrap; /* set flex layout to be vertical */
}
.content {
  background: white; /* set white background on content div */
  flex-grow: 1; /* force content div to take over all the remaining space */
}

Upvotes: 0

Abhishek Bhagate
Abhishek Bhagate

Reputation: 5766

In Bootstrap, you can simply achieve it using bootstrap classes as follows -

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<body>
  <div class="card text-center" style="width:400px; height:704px; background-color:gray;">
    <div class="card-header">Header</div>
    <div class="card-body" style="width:100%; height:100%;">Content</div>
    <!-- The below button always stays at the bottom-->
    <div class="card-footer"><button class="btn btn-success">Some Button</button></div>
  </div>

</body>

That's the way you can do using Bootstrap classes. But if you were looking for an answer to do it in simple HTML, CSS, here's a simple way -

<div class="card" style="width:400px; height:704px; background-color:gray; text-align:center;">
  <div>Header</div>
  <!-- Here you need to leave some height for the button -->
  <div style="width:100%; height:90%;">Content</div>
  <div><button>Some Button</button></div>
</div>

Upvotes: 2

Xenvi
Xenvi

Reputation: 887

CSS Flexbox has a quick and easy to implement solution to this. What you can do is set the parent container to display: flex, change the direction of the content to column (display flex initially sets flex-direction to row), then align the items to "space-between" which means the child elements will be placed at the start and end of the container. This way, your content will always be at the start and your button will be at the bottom.

<html>
<body>

<div style="width:400px; height:704px; background-color:gray;">

<div class="container" style="display: flex; flex-direction: column; justify-content: space-between; width:100%; height:100%;">

    Some content
    <button style="width: 100px">Some Button</button>
</div>


</div>

</body>
</html>

Upvotes: 1

Brilliand
Brilliand

Reputation: 13714

Usually, your webpage is only as large as its content, even if the browser window is larger. You can override that:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

However, the part where you want one element to take up "all remaining space" is tricky. You have two options here: table layout or flex layout. Here's the table layout way:

body {
   display: table;
}
.container {
    display: table-row;
    height: 100%;
}

(I've only used vanilla CSS here, not Bootstrap.)

jsFiddle: https://jsfiddle.net/89rxtfuw/

Upvotes: 0

pr0cz
pr0cz

Reputation: 507

Do something like this (quoting the right answer of the post):

"But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).

If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both"."

   <div style="position: relative; 
                width: 200px; 
                height: 150px; 
                border: 1px solid black;">
    
        <div style="position: absolute; 
                    bottom: 0; 
                    width: 100%; 
                    height: 50px; 
                    border: 1px solid red;">
        </div>
    </div>

Reference: How can I send an inner <div> to the bottom of its parent <div>?

For you it could be like this:

<div class="container" style="width:100%; height:100%; position: relative;">

    Some content
    <div class="button" style="position: absolute; bottom: 0;"><button>Some Button</button></div>
</div>

Upvotes: 1

Related Questions