I'm using Bootstrap to create an input field for a web application.
I'm using btn-group to create a segmented control of 3 selection (for users to select their sex). Unfortunately, I can't get it to behave how I would like.
I can't get the button group to be visually consistent with the other (text, email) input fields. I'd like for this control to be the same width as the other fields, with each of the 3 choices being the same width, each 1/3 the width of the whole.
- I've tried applying the
form-controlclass. It gets the right size, but it create a duplicate outline. I've tried setting the button group to 100% width, with each button being 33% width. When I inspect the button group, it's the correct width, but most of it is blank space, with the children's width being unaffected.
Male Female Other
Here's how it currently looks:
Here's a rough mock-up of the desired outcome:
Here's the jsfiddle.
How can I achieve this? Thanks.
