CODEWITHSUNDEEP
twitter-bootstrapalignment
sir-haver
sir-haver

Reputation: 3592

Bootstrap 4 - align an element to the bottom of its container

I tried to find an answer to this but no luck, also tried a few things myself. I have two columns inside a row, and I would like to vertically align the bottom div of the second column (the three buttons group) to the bottom of the row container, namely #control-panel.

Currently the second column is centered align (vertically), and that's why the three buttons are not attached to the bottom of the container.

Also I'm attaching an image to make it easier to see Attached image

 <div id="control-panel">
    <div class="container">
      <div class="row">

        <div class="col-lg-3">
          <div class="display-4 p-3"><h2>Step 3:</h2></div>
          <p>Add a contact form, if you like, so people can contact you!</p>
          <a href="" class="btn btn-primary">Show contact form</a>
        </div>
        <div class="col-lg-3 d-flex flex-column">
          <div class=" p-3"><h2>Step 4:</h2></div>
            <p>Pick a style for your website</p>
            <div class="btn-group align-self-bottom">
              <button class="btn btn-primary" type="button">Style 1</button>
              <button class="btn btn-secondary" type="button">Style 2</button>
              <button class="btn btn-primary" type="button">Style 3</button>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS for the container is just:

#control-panel {
height: 200px
}

I tried to use 'align-self-bottom' or 'align-self-end' for the 'btn-group' class which I want to align to the bottom, but it moves it horizontally and not vertically as I wanted.

Thanks a lot for any suggestion

Upvotes: 0

Views: 4150

Answers (1)

Juan
Juan

Reputation: 2084

Check this StackBlitz: FlexBox example

enter image description here

HTML file:

<div class="main-container">
  <div class="first-column">

  </div>

  <div class="second-column">
    <div class="buttons">

      <button>Button1</button>
      <button>Button2</button>
    </div>
  </div>
</div>

CSS file:

.main-container {
  border-color: red;;
  border-style: solid;
  height: 100px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.first-column {
  border-color: blue;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.second-column {
  border-color: green;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  height: 100px;
}

Im using flexbox here to create a main container (red) and two columns inside (blue and green), then in the second column I create two buttons and align them to the bottom of their container.

Upvotes: 1

Related Questions