CODEWITHSUNDEEP
cssbuttonbootstrap-4
profiler
profiler

Reputation: 627

How to align buttons to bottom on the page

I would like to align all button to bottom on the page:

enter image description here

The editor with code:

https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed

<div class="container-fluid py-2">
  <div class="row">
    <div class="col-md-12 mx-auto">
      <div class="card rounded-0">
        <div class="card-header">
          <h2>Boot Container View</h2>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="ws-details" style="background:gray; height:100px">
                Element1
              </div>
              <div
                class="order-details"
                style="background:lightgray; height:200px"
              >
                Element 2
              </div>
            </div>
            <div class="col-md-6">
              <div style="background:gray; height:305px">Element3</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1a
                    </button>
                  </p>
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 2a
                    </button>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1b
                    </button>
                  </p>
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 2b
                    </button>
                  </p>

                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 3b
                    </button>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="center-block">
                <div class="btn-group-vertical">
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 1c
                    </button>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I tried with position absolute and relative with parent/child element. But still I have problem with the proper align buttons. Also - I would like to change size (width of buttons), and after change style width there is problem with center button.

Upvotes: 0

Views: 4664

Answers (3)

Jeremy
Jeremy

Reputation: 1384

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?

Upvotes: 4

Ferid Bedru Sherif
Ferid Bedru Sherif

Reputation: 11

It seems that you are using a bootstrap for this code and thus if you need to align the buttons to the bottom, you can use a custom css. Let this css class be alignBottom. 

.alignBottom{
     position: absolute;
     bottom: 0px;
}

Upvotes: 0

Muaz
Muaz

Reputation: 12

use this css properties:

bottom:0
position:absolute

Upvotes: 0

Related Questions