Equal Button Height

I’m using the Button Group feature and need to set the button heights to the same size, regardless of the amount of text displayed. I can find button width but not height. How can I set a universal button height? I’m not very familiar with CSS so if that is required I will need detailed instructions, please.

Hi @Muffy, you can use custom CSS:

  1. Add a custom class to your Buttons Group module > Advanced tab, like my-buttons-group
  2. Add this CSS:
.my-buttons-group .fl-button-wrap, 
.my-buttons-group .fl-button {
    height: 100%;    
}
.my-buttons-group .fl-button-width-full .fl-button {
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

At most simple, custom CSS can be added via the BB Tools menu when editing a BB layout (top left of the BB bar):

  • BB Tools > Layout CSS/JS > CSS tab (only for the edited layout)
  • BB Tools > Global Settings > CSS tab (sitewide)

More info in BB KB: Where to add custom CSS | Beaver Builder Knowledge Base