Align Button at the Bottom of Div Using CSS

Align button at the bottom of div using CSS

You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.

To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.

So add position:relative; to the content div, remove the float from the button and add the following css to the button:

position: absolute;
right:    0;
bottom:   0;

Align button to bottom of div in desktop and left of div in mobile

You could set the columns of the elements containing the textarea and the button to be display: inline-block (you would have to set float: none for this to work) and then use vertical-align: bottom to align the elements to the bottom of the line that they're siting on.

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {  font-size: 12px !important;  font-family: 'Roboto Condensed', sans-serif !important;  font-weight: 400 !important;}
.title-lighter {  font-family: 'Roboto', Arial, Helvetica, sans-serif;  color: #737373;}
.centering {  float: none;  margin: 0 auto;}
.btn-centering {  width: 90% !important;  margin-left: 5% !important;  margin-bottom: 5px !important;}
.padding {  padding: 80px 0;}
.contact-form {  background: #fff;  margin-top: 10%;  margin-bottom: 5%;  width: 70%;}
.contact-form .form-control {  border-radius: 1rem;}
.contact-form form {  padding: 14%;}
.contact-form form .row {  margin-bottom: -7%;}
.contact-form h3 {  margin-bottom: 8%;  margin-top: -10%;  text-align: center;  color: #0062cc;}
.contact-form .btnContact {  width: 50%;  border: none;  border-radius: 1rem;  padding: 1.5%;  background: #dc3545;  font-weight: 600;  color: #fff;  cursor: pointer;}
.btnContactSubmit {  width: 50%;  border-radius: 1rem;  padding: 1.5%;  color: #fff;  background-color: #0062cc;  border: none;  cursor: pointer;}
.centered-row {  text-align: center;}
.btn-bottom {  display: table-cell;  vertical-align: bottom;}
.box {  display: table !important;  width: 100%;  height: 100%;}
@media (min-width: 992px){.row--mod .col-md-8.col-md-offset-2 > * {  float: none;  display: inline-block;  vertical-align: bottom;}
.row--mod .col-md-8.col-md-offset-2> :first-child {  margin-right: -4px;  width: 66.6667%;  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="padding">  <div class="container">    <div class="row">      <h3 class="text-center">Contact Us</h3>      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>    </div>    <div class="row">      <div class="col-md-8 col-md-offset-2">        <div class="col-md-4">          <label for="inputname">Name</label>          <input type="text" class="form-control" id="inputname">        </div>        <div class="col-md-4">          <label for="email">E-mail</label>          <input type="text" class="form-control" id="email">        </div>        <div class="col-md-4">          <label for="organization">Organization</label>          <input type="text" class="form-control" id="organization">        </div>      </div>    </div>    <div class="row row--mod">      <div class="col-md-8 col-md-offset-2">        <div class="col-md-8">          <label for="message">Message</label>          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>
        </div>        <div class="col-md-4">
          <button type="submit" class="btn btn-primary">Submit</button>        </div>      </div>    </div>  </div>  <hr /></div>

Align button at the bottom of div

You could add another class that absolute positions the parent div of the button. Then set bottom: 0, and the width 100% to allow to still center.

For instance something like:

.alignBottom {
  position:absolute;
  bottom: 0;
  width: 100%;
}

JSFiddle here to see it working:

https://jsfiddle.net/5hd7ow7p/2/

How to move the button to the right-bottom of my div box?

There are many solutions for this. The easiest here is to say text-align:right

.color .btn {
text-align: right;
}

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 30px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.color .btn {
text-align: right;
}


.btn a {
  display: inline-block;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}

.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}

<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

Align a button to the bottom of the div using CSS (I have already equalized the columns)

I suggest you use Flexbox.

The below pseudo code shows when one use margin-top: auto in a flex column direction, it push the element towards the bottom of its parent.

.outer .inner {  display: flex;  flex-direction: column;            /*  stack items vertically  */}.outer .inner .button {  margin-top: auto;                  /*  push button to bottom  */}

/* styling for this demo only  */.outer {  display: flex;}.outer .inner {  width: 33.333%;  padding: 5px;  border: 1px dotted red;}.outer .inner .header,.outer .inner .text {  padding: 10px;}.outer .inner .button {  border: 1px solid gray;  text-align: center;}

<div class="outer">  <div class="inner">    <div class="header">Header</div>    <div class="text">Some text</div>    <div class="button">Button</div>  </div>  <div class="inner">    <div class="header">Header</div>    <div class="text">Some text, where it can be very very very very very very very very very very very very very very very very very very very very long</div>    <div class="button">Button</div>  </div>  <div class="inner">    <div class="header">Header</div>    <div class="text">Some text that is middle middle middle middle long</div>    <div class="button">Button</div>  </div></div>

Place button on bottom of a div

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>

How to align buttons to bottom on the page

Changes in app.component.html file:

On line 25 in your html file change <div class="row"> to <div class="row position-relative">.

On line 27 and line 65 change <div class="center-block"> to <div class="center-block align-to-bottom">

Changes in app.component.css file:

Add:

@media only screen and (min-width: 767px) {
  .align-to-bottom {
    bottom: 0;
    position: absolute;
  }
}

Link to the editor: https://codesandbox.io/s/angular-7-bootstrap-4-u5uet

To change the width of the button you could add button.btn-info {width: 150px;} to your css. You said then there was a problem with the center button but what problem do you mean?

Align buttons to bottom-left corner using flex

What you missed in your code is flex-direction. By default it will be row, hence the div's were coming side by side. You need to specify the value as column.

.flex-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  border: solid 1px red;
  position: relative;
}

.button-container{
  border: solid 1px green;
  display: flex;
  position: absolute;
  left: 20px;
  top: 50px;
}

<div class="flex-container">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" />
    <div class="button-container">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>

How to position a button at the bottom and center of div?

You can set it using position: absolute;. updated codepen

<div class="text-center btnDiv">
    <a href="#about" class="btn btn-primary btn-xl">Find Out More</a>
</div>


.jumbotron {
    position: relative;
}
.btnDiv {
  width: 100%;
  left: 0;
  bottom: 10px;
  position: absolute;
}