Aligning content in bootstrap css columns middle or bottom

Tagged: 

Author Posts

robertlo June 20, 2018 at 9:34 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I have added my own custom bootstrap css to create columns within columns in Divi (since they don’t appear to allow nested columns natively). How in MT can I do the following:

Align the content of the columns within a bootstrap row to the bottom

and

Align the content of the columns within a bootstrap row to the middle

Thanks

Sebastian June 21, 2018 at 9:47 am

Hi Robert ,

Would you mind sending me a link to the page you’re working on so I can see a concrete example of what you’re trying to do?

My initial thoughts are that flexbox properties might be the way forward. You can watch a video explaining flexbox properties here in case that helps: https://themeover.com/microthemer-flexbox/

Cheers,
Sebastian

robertlo June 21, 2018 at 5:25 pm

Can I reply private? The client prefers anonymity.

Sebastian June 22, 2018 at 7:58 am

Yes of course, please feel free to message me via our contact form.

Sebastian June 22, 2018 at 12:48 pm

Hey Robert,

I just received your original message via my feed reader. Perhaps there was a delay as I had to update the DNS for themeover.com while switching server yesterday. So in answer to your question, the following should do the trick for bottom aligning the content:

.footer-phone-email .row {
    display: flex;
    align-items: flex-end;
}

It sets flexbox on the bootstrap row. If you wanted to center align rather than bottom align, you would set align-items: center; instead.

Note, you can remove your position relative setting of bottom:19px when using this flexbox method.

Does that display things how you want?

Cheers,
Sebastian

robertlo June 23, 2018 at 8:28 pm

Yes. That worked, but I did it MT GUI, but now all the content in those 4 rows are not center aligned in that footer row.

What css can I use to center all those items in that row? Of course the “Houston/” part above the phone number will be slightly higher than all the other content.

Sebastian June 25, 2018 at 9:38 am

Hey Robert,

You have set position:top on the following selector (for large desktop):

.back-to-top .row

Could that be throwing you off?

In general, I think in order to achieve consistent vertical alignment with flexbox it might be necessary to avoid nesting – so each div that should be aligned is the first child of the flex container element (the one with display:flex). Because otherwise there are two separate alignment contexts. One for the majority of columns in the footer. And another for the nested bootstrap columns.

What is essential to use nesting here? If so, perhaps tweaking the alignments with position relative is necessary. I’m not 100% certain on how you want the precise alignment to look right not, so apologies if this answer is a bit general.

Cheers,
Sebastian

robertlo June 27, 2018 at 3:35 am

I have actually switched themes and plugin from Divi to Beaver, which I feel is much better. I can get everything I want out of beaver natively for the most part. But I don’t know much about flexbox css at all, so most of what you just said is over my head lol.

Sebastian June 27, 2018 at 8:14 am

Oh good, I agree that Beaver Builder is a great choice. And MT integrates more tightly with BB too.

And yes, flexbox is one of the CSS groups that takes a bit of getting used to. It’s one of the few I find myself needing to refer to the Microthemer GUI fields to remind myself of the syntax and how it works lol. But in more simpler terms, I was trying to say that only the immediate children of a flex container element will be aligned in a certain way when setting the align-items property.

Cheers,
Sebastian

You must login or register to reply to this topic.