CODEWITHSUNDEEP
csshtmltwitter-bootstrap
sam
sam

Reputation: 2579

Bootstrap form alignment and sizing

I am creating a simple control panel using Bootstrap and HTML5. I am having an issue where some of the elements in my form are not vertically aligning.

Here is a jsfiddle illustrating the problem along with the form html.

https://jsfiddle.net/srose/rqmu3uyr/

<form class="form-horizontal" id="control-panel" name="control-panel" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Status</label>
                            <div class="col-sm-9">
                                <div id="statusSelector" class="btn-group" data-toggle="buttons">
                                  <label id="btnEnabled" class="btn btn-success active disabled">
                                    <input type="radio" name="options" id="option1" autocomplete="off"> Enabled
                                  </label>
                                  <label id="btnDisabled" class="btn btn-danger">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Disabled
                                  </label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Mode</label>
                            <div class="col-sm-9">
                                <label class="radio-inline">
                                    <input name="RadioOptions" type="radio" value="view-only" checked="checked">View Only
                                </label>
                                <label class="radio-inline">
                                    <input name="RadioOptions" type="radio" value="Save-on-motion">Save on motion
                                </label>
                            </div>
                        </div>
                    </form>

You can see 'status' and 'mode' aren't aligned.

Does anyone know what the issue is here? Also, how would I get the panel to scale to fill the whole screen when viewed on a phone screen? Currently the buttons are very small when viewed on mobile.

Thanks

Upvotes: 0

Views: 65

Answers (1)

EA-Lille
EA-Lille

Reputation: 561

Bootstrap add some css to div tag. In your first from-group you had 2 divs instead of one in the second form-group. You can resolve it by merging the 2 divs of the first from-group.

And </div> missing in first group, take care about it.

First from-group

<div class="col-sm-9">
    <div id="statusSelector" class="btn-group" data-toggle="buttons">

Secondfrom-group

<div class="col-sm-9">

First from-group merged

<div  id="statusSelector" class="col-sm-9 btn-group"  data-toggle="buttons">

Live example here:

https://jsfiddle.net/jvLhh6fq/

Scale

Now for the scale I recommand you this post:

Responsive website zoomed out to full width on mobile

Upvotes: 1

Related Questions