Bootstrap

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted over 3 years ago

  Hi Deep!

  Yeah the buttons on this design can be a little tricky. There's a couple of approaches.

  1. Old skool

  • Set the.col-md-3 to position: relative;
  • Set the button to position: absolute; bottom: 0; left: 0;

  This will fix the button to the bottom left corner of the containing element. The problem though is that the button will "float" on top of any text that fills up the container, so it doesn't work well for all designs.

  2. Flexbox

  • Set the .col-md-3 to display: flex; flex-direction: column; align-items: space-between;

  This will ensure that the text and the button sit one on top of the other and any extra space in the container will sit between the two elements. That should force the button to the very bottom of the container and the text should stay on the top.

  For more flexbox fun, check out https://flexboxfroggy.com/

  2

  ---

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @mickyginger I vote flexbox! :)

  0

  

  Deep•235

  @deepchhatraliaPosted over 3 years ago

  @mickyginger thank you so much

  0
• Account deleted

  if you're using bootstrap add those classes to your main card div: d-flex flex-column justify-content-between d-flex => display:flex; flex-column => flex-direction: column; justify-content-between: justify-content:space-between; And check out docs

  0