Left aligned link supporting modal trigger

Does anyone have a suggestion/good solution how to create a link in a page footer that triggers a modal screen?

I have tried several options and the best so far is to use a button group. Problem however is that the button text does not have an alignment property as the alignment is on button level. I tried to use grids, max-with and space (and in any combination of them) to get some kind of setup, but it looks almost impossible to get a stable setup supporting all screen sizes.

Using a List Group/Item setup is not an option either as, strangely enough, List Group/Items do not support the modal trigger option.

The above is in Foundry v3.

Appreciate your thoughts and thanks.

Have you looked at using Buttons with the Link styling for the Button’s Mode option?

I don’t know if this will help you any better than @elixirgraphics’ suggestion. But you can also just use HTML. In some cases this provides more flexibility.

For example, the generic HTML for a text-link to open a modal is:

<a href="#" data-bs-toggle="modal" data-bs-target="#unique-modal-name-here">link-name-visible-to-user</a>

and HTML for button-link to open a modal:

<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#unique-modal-name">button-text-visible</a>

1 Like

As I’m going to use a few buttons on the page footer in “Link” mode the thought was to have a button group. I have not looked into the use of individual buttons in link mode in a series of columns. Not tried yet, but will do.

Thanks

Thanks for that suggestion. Always good to have an alternative at hand. Will try this suggestion as well.

Thanks.

Button Group has the same Link styling option as well.

I have set up a test scenario with the suggestions given. The button option in a grid serves the purpose best. The HTML option is a very good option for “special” cases, yet has less RW control options, hence all formatting needs to be done either by class or HTML code.

Thanks for the very quick responses.