CODEWITHSUNDEEP
cssbootstrap-4
yaylitzis
yaylitzis

Reputation: 5534

Place a button in the bottom of a column in Bootstrap

I am trying to place a button to the bottom of the column with no success.

I read this question so I added the d-flex, flex-column, mt-auto CSS classes but they aren't have any effect. What am I missing?

.my-200 {
  height: 400px;
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
  <div class="col-2 my-200">
  </div>
  <div class="col-10 flex-column">
    <div class="form-row">
      <div class="form-group col-12">
        <label>Title</label>
        <input name="comment" type="text" class="form-control" value="">
      </div>
    </div>

    <div class="form-row mt-3">
      <div class="form-group col-4">
        <button class="btn btn-primary">button 1</button>
      </div>
    </div>

    <div class="form-row mt-auto">
      <div class="form-group col-4">
        <button class="btn btn-dark">place bottom</button>
      </div>
    </div>
  </div>
  </div

Upvotes: 0

Views: 387

Answers (1)

dale landry
dale landry

Reputation: 8600

Place a row BS class selector class in the flex-column element effectively making it a flex container, then place an align-self-start BS class selector on the last form-row element that contains the button making align-self set to start.

.my-200 {
  height: 400px;
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-around">
  <div class="col-2 my-200">
  </div>
  <div class="row col-10 flex-column">
    <div class="form-row">
      <div class="form-group col-12">
        <label>Title</label>
        <input name="comment" type="text" class="form-control" value="">
      </div>
    </div>

    <div class="form-row mt-3">
      <div class="form-group col-4">
        <button class="btn btn-primary">button 1</button>
      </div>
    </div>

    <div class="form-row mt-auto align-self-start">
      <div class="form-group col-4">
        <button class="btn btn-dark">place bottom</button>
      </div>
    </div>
  </div>
  </div

Upvotes: 1

Related Questions