Semantic UI React: How to center forms

Date: 2019-06-24 | semantic-ui | react | form | tutorial |


I have a Semantic UI React Form.Group that contains radio buttons. I want those buttons to be centered, but the usual center aligned css classes don't seem to be doing the trick. How can I center this form?


You can center this Form.Group (or even the entire Form itself) by wrapping the Form in a Semantic UI React Grid and then adding the center aligned classes to it.

So a centered Form might look something like:

<Grid className="center aligned">


did this help?

I regularly post about tech topics I run into. You can get a periodic email containing updates on new posts and things I've built by subscribing here.

Want more like this?

The best / easiest way to support my work is by subscribing for future updates and sharing with your network.