Search code examples
htmlcsstwitter-bootstrapbuttongroup

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

    Male Female Other

Here's how it currently looks:

currently

Here's a rough mock-up of the desired outcome:

desired

Here's the jsfiddle.

How can I achieve this? Thanks.

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

    https://jsfiddle.net/gcsru9go/