AMomchilov AMomchilov - 4 months ago 8
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

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.

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

https://jsfiddle.net/gcsru9go/

Comments