1

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.

Dylan Wheeler
  • 6,928
  • 14
  • 56
  • 80
Alexander
  • 59,041
  • 12
  • 98
  • 151

1 Answers1

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

https://jsfiddle.net/gcsru9go/

JDro04
  • 650
  • 5
  • 15
  • Thanks! I'll accept your answer when the 15 minutes is up. May I ask how you knew about this? Do you know of any documentation listing all the available classes? – Alexander Jul 13 '16 at 20:07
  • http://getbootstrap.com/components/ I'm not sure it lists all of them, but that one it does – JDro04 Jul 13 '16 at 20:08
  • I was on that page! Wonder how I could have missed that. Thanks! – Alexander Jul 13 '16 at 20:33