Help text on form elements (github.com/wet-boew/wet-boew/issues/6613).

HelpTextOnFormElements.html

<form role="form" method="get" action="#">
    <div class="text-left">
        <div class="row">
            <div class="col-xs-12 col-md-4">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" aria-describedby="help-email" />
                </div>
            </div>
            <div class="col-xs-6 col-md-8">
                <details>
                    <summary><span class="glyphicon glyphicon-question-sign"></span><span class="wb-inv">E-mail help</span></summary>
                    <div class="panel panel-info">
                        <div class="panel-body" id="help-email">
                            <p>E-mail (electronic mail) is a system that allows you to send and receive electronic messages between computers.</p>
                        </div>
                    </div>
                </details>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-4">
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" aria-describedby="help-password" />
                </div>
            </div>
            <div class="col-xs-6 col-md-8">
                <details>
                    <summary><span class="glyphicon glyphicon-question-sign"></span><span class="wb-inv">Password help</span></summary>
                    <div class="panel panel-info">
                        <div class="panel-body" id="help-password">
                            <p>A password is a sequence of characters that one must input to gain access to a file, application, or computer system.</p>
                        </div>
                    </div>
                </details>
            </div>
        </div>            
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile" />
    </div>
    <div class="checkbox">
        <label><input type="checkbox" /> Check me out</label>
    </div>
    
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <fieldset>
                <legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend>
                <div class="radio">
                    <label for="status1">
                        <input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Canadian citizen</label>
                </div>
                <div class="radio">
                    <label for="status2">
                        <input type="radio" name="status" value="2" id="status2" />&#160;&#160;Permanent resident</label>
                </div>
                <div class="radio">
                    <label for="status3">
                        <input type="radio" name="status" value="3" id="status3" />&#160;&#160;Work permit</label>
                </div>
                <div class="radio">
                    <label for="status4">
                        <input type="radio" name="status" value="4" id="status4" />&#160;&#160;Other</label>
                </div>
            </fieldset>
        </div>
        <div class="col-xs-6 col-md-8">
            <details>
                <summary><span class="glyphicon glyphicon-question-sign"></span><span class="wb-inv">Citizenship status help</span></summary>
                <div class="panel panel-info">
                    <div class="panel-body" id="help-citizenship">
                        <p>A Canadian citizen is a person described as a citizen under the Citizenship Act.  
                            A permanent resident is a person who has legally immigrated to Canada but is not yet a Canadian citizen.
                            A work permit is document issued by CIC that authorizes a person to work legally in Canada
                        </p>
                    </div>
                </div>
            </details>
        </div>
    </div>
    
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Demo code for wet-boew issue #6613.

Hi Rob, how about placing the help under the label. I modified your code slightly, that should fix the magnification issue:

Email address

E-mail help

E-mail (electronic mail) is a system that allows you to send and receive electronic messages between computers.

Password

Password help

A password is a sequence of characters that one must input to gain access to a file, application, or computer system.

File input

Check me out

<div class="row">
    <div class="col-xs-12 col-md-4">
        <fieldset>
            <legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend>
            <details>
            <summary><span class="glyphicon glyphicon-question-sign"></span><span class="wb-inv">Citizenship status help</span></summary>
            <div class="panel panel-info">
                <div class="panel-body">
                    <p>A Canadian citizen is a person described as a citizen under the Citizenship Act.  
                        A permanent resident is a person who has legally immigrated to Canada but is not yet a Canadian citizen.
                        A work permit is document issued by CIC that authorizes a person to work legally in Canada
                    </p>
                </div>
            </div>
            </details>
            <div class="radio">
                <label for="status1">
                    <input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Canadian citizen</label>
            </div>
            <div class="radio">
                <label for="status2">
                    <input type="radio" name="status" value="2" id="status2" />&#160;&#160;Permanent resident</label>
            </div>
            <div class="radio">
                <label for="status3">
                    <input type="radio" name="status" value="3" id="status3" />&#160;&#160;Work permit</label>
            </div>
            <div class="radio">
                <label for="status4">
                    <input type="radio" name="status" value="4" id="status4" />&#160;&#160;Other</label>
            </div>
        </fieldset>
    </div>
</div>

<button type="submit" class="btn btn-default">Submit</button>

I realized that my code has been translated to text.