how to align a glyphicon to a form?



I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.

My problem is shown here: http://imgur.com/a/xscLJ

picture of the
issue

I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.

<div id="form" class="collapse in">
        <div id="loginwrong" style="display: inline-block;
vertical-align: top;">
            <div id="loginwrong2" style="display: none;">
                <span class='glyphicon glyphicon-remove-circle'
style="color: red; font-size: 2em;"></span>
            </div>
        </div>

        <form method="POST" class="form-inline" role="form">
            <input type="password" name="pw" placeholder="Enter
Password" class="form-control">
            <input type="submit" class="btn btn-primary"
name="submit" value="Submit">
        </form>
    </div>

I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)

<?php
echo "<script type='text/javascript'>
                    $('#loginwrong2').show();
                </script>";
?>

Related to : how to align a glyphicon to a form?

Privacy Policy - Copyrights Notice - Feedback - Report Violation - RSS 2017 © bighow.org All Rights Reserved .