How to force form labels to align right?

Question

I have this code

<div class="modal-dialog text-center">
    <div class="modal-content">
        <div class="modal-body">
            <h3 class="modal-title"> Session </h3>
            <small>Enter a unique client name</small> <br><br>
            <p>

                </p><div class="form-group row">
                    <label for="sessionName" class="col-sm-6 col-form-label pull-right" style="padding-top: 15px;">Client Session Name</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" name="sessionName" id="sessionName" placeholder="Awesome">
                    </div>
                </div>


                <div class="form-group row">

                    <label for="autoMac" class="col-sm-6 col-form-label">
                        Auto Generate Client MAC
                    </label>


                    <label for="autoMac" class="col-sm-2 col-form-label">

                        <div class="onoffswitch pull-right">
                            <input type="checkbox" name="autoMac" class="onoffswitch-checkbox" id="autoMac">
                            <label class="onoffswitch-label " for="autoMac">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>

                    </label>

                </div>


                <div class="form-group row ueMacDiv" style="display: none;"><label for="ueMac" class="col-sm-6 col-form-label pull-right">Client Session MAC Address</label>
                    <div class="col-sm-6"><input type="email" class="form-control" name="ueMac" id="ueMac" placeholder="AA:BB:CC:11:22:33"></div>
                </div>



                
                <div class="form-group row">

                    <label for="iperfSwitch" class="col-sm-6 col-form-label">
                        Map iPerf profile(s)
                    </label>


                    <label for="iperfSwitch" class="col-sm-2 col-form-label">

                        <div class="onoffswitch pull-right">
                            <input type="checkbox" name="iperfSwitch" class="onoffswitch-checkbox" id="iperfSwitch">
                            <label class="onoffswitch-label " for="iperfSwitch">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>

                    </label>

                </div>


                <div class="form-group row iperfDiv text-center" style="display: none;">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6">
                        <select name="iperfProfile" multiple="" data-select2-id="select2-data-1-7s0q" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="ipv6-udp-upload">ipv6-udp-upload</option><option value="ipv6-udp-download">ipv6-udp-download</option><option value="udp-upload">udp-upload</option><option value="tcp-upload">tcp-upload</option><option value="random2">random2</option><option value="random">random</option><option value="tcp-download">tcp-download</option><option value="udp-download">udp-download</option><option value="Surya">Surya</option><option value="BeverlyHillsUDP">BeverlyHillsUDP</option></select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="select2-data-2-9etd" style="width: 1.98864px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false"><ul class="select2-selection__rendered" id="select2-iperfProfile-e0-container"></ul><span class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" autocomplete="off" aria-describedby="select2-iperfProfile-e0-container" placeholder="Select iPerf profile(s) ..." style="width: 100%;"></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                    </div>
                </div>


                <div class="form-group row iperfDiv" style="display: none;">
                    <label for="sessionName" class="col-sm-6 col-form-label pull-right" style="padding-top: 15px;">iPerf Frequency</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" name="frequency" id="frequency" placeholder="3000">
                    </div>
                </div>


                
                <div class="form-group row selectAlertProfile">
                    <label style="padding-top: 25px;" class="col-sm-6 col-form-label pull-right">
                        Map Alert Profile
                    </label>
                    <div class="col-sm-6">
                        <select name="alertProfile" class="float-right form-control">
                            <option class="defaultAlertProfile" value="default">Select Profile</option>
                        </select>
                    </div>
                </div>

            <p></p>

        </div>

        <div class="modal-footer">

            <button id="notLaunch" type="button" class="btn btn-link " data-dismiss="modal">No</button>
            <button id="launch" class="btn btn-primary" data-dismiss="modal">Create</button>

        </div>
    </div>
</div>

It yield this UI

I'm trying to align all the labels to the right, I've tried applying the class pull-right & float-right & even tried !important; on it.

Nothing seems moving.

Any hints for me ?

Answer 1

If you can change the markup, then here is a simple solution with example. Wrap the label with div of class .col-* & .text-right that's all

form {
  width: 600px;
  margin: 30px auto
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form>
    <div class="col-xs-6 text-right">
        <label for="exampleInputEmail1">Email address</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
    </div>
    <div class="col-xs-6 text-right">
        <label for="exampleInputPassword1">Password</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
    </div>
    <div class="col-xs-6 text-right">
        <label for="exampleInputCheckbox1">Checkbox</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <div class="checkbox">
                <label>
                  <input type="checkbox" id="exampleInputCheckbox1"> Check me out
                </label>
            </div>
        </div>
    </div>
  <div class="col-xs-6 text-center col-xs-offset-6">
    <button type="submit" class="btn btn-block">Submit</button>
  </div>
</form>

Answer 2

Set class text-right instead of pull-right or float right. Because those class would just try to push the label tag from outside. And not the content as « text-right » would do!