asked on

Center glyiphicon with input controls

Hello, with my code below I'm attempting to center my form in a div, when I do so the glyphicons stay left aligned and do not stay with the input control which do center align. How do I get this to work correctly?

 <div class="text-center">
                    <form action="" id="loginForm">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input class="form-control" type="text" name='username' placeholder="username" />
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input class="form-control" type="password" name='password' placeholder="password" />
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-def">Login</button>
                        </div>
                        <input hidden id="hdnUserEnviroment" />
                    </form>
                </div>

Open in new window

Marco Gasi

I'd suggest you to migrate from glyphicon to font awesome icons: already in Bootstrap 4.0 Alpha Glyphicons have been removed.
Personally, I always have used FontAwesome and even in your case they appear to be perfectly aligned: http://test.webintenerife.com/icon_align.html

Pravin Asar

For some reasons, you want to continue using Bootstrap 3.xx, use CSS

text-align:center;

Pravin Asar

Here is simple example

http://jsfiddle.net/pravinasar/BLAXF/196/

lenamtl

Hi,

You can try this example and adapt the width to your needs
https://codepen.io/OldManJava/pen/bwupj

Or you can do the following divide the main div columns by 3 columns / total bootstrap columns = 12
then put your form div in middle column.

<div class="row">
   <div class="col-md-4></div>
   <div class="col-md-4>put the form here</div>
   <div class="col-md-4></div>
</div>

Open in new window

or you can play with offset helper

<div class="col-md-4 col-md-offset-4">put the form here</div>

Open in new window

to read more about offset
http://getbootstrap.com/css/#grid-offsetting

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.