AMomchilov AMomchilov - 1 year ago 60
CSS Question

Align btn-group to other form-control input fields

I'm using Bootstrap to create an input field for a web application.

I'm using

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
    class. 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.




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.

Answer Source
<div style="width: 100%" class="btn-group btn-group-justified" data-toggle="buttons">