Force a button in div to stay on bottom of column

I Need Help
1

Hello, Sorry this is probably a easy thing to do in Blocs flex container but I can’t get it to work.

The column has these elements

H2
Paragraph
Button

I would like the button to be on the bottom of the column regardless of the paragraph size.

Thanks a million for any advice.

2

Several ways to approach it, really depends on how you have built all your structure.

But simply you can add .mb-auto to the paragraph or .mt-auto to the button (either way works. These are Bootstrap classes.).

The other option if you have a proper structure and lots of these is just use the class editor to apply margin-bottom to all the paragraphs without having to deal with individual ones.

eg.
.my-wrapping-class p { margin-bottom: auto; }

You can save a lot of time with the right structure.

3

Hi @calibinder

Sorry if im not understanding what you’re trying to do 100% - but why not just put a H2, Paragraph and then a button in a DIV container? if the button is at the bottom, then it will stay there??

Now if you want to keep the columns the same size, I personally would do it in a card and give it a size in a class and of course you can style it anyway you want.

Thats how I would do it anyway.

Blocs-3
Blocs-31352×946 56.5 KB

4

Really depends on what you’re making. In a current project I am working on, I have a basic flex div, variable height, button sits at bottom. A card isn’t suitable here as it’s part of an animated interaction, and I don’t need the complexity of the markup or additional styling.

1 Like
5

I do need to use Flex more.
So powerful and useful.

1 Like
6

AdiJAM and Malachiman

Thank you both I was able to get it working with your help. I set the flex container to be a column and applied the classes and was able to get the button to stick to the bottom.

Thank You

1 Like
7

Hi:

Is it up somewhere so we can all see it?

Rich the Weather Guy