Me parece que estás forzando un poquito las cosas usando los estilos personalizados. Bootstrap te da básicamente todo lo que pudieras necesitar para lograr un diseño limpio y bien organizado.
Lamentablemente no has agregado suficiente código para saber exactamente lo que estás haciendo. Por lo tanto, y de acuerdo al código que has subido, esta sería una forma de obtener un resultado (espero que sea el deseado) que hará ver tu diseño bastante bien.
PROBLEMA
Se desea crear un campo tipo input
que contenga un ícono de usuario. Además se desea que el campo se encuentre centrado en el contenedor.
SOLUCIÓN
Para obtener el resultado deseado usaremos el framework de Bootstrap v.4.3, y el icono SVG lo obtendremos del framwork Font Awesome v5.7.
Usaremos los siguientes estilos de Bootstrap:
- container-fluid
- form-group
- row
- justify-content-center
- mt-4
- col-md-4 col-6
- input-group
- flex-nowrap
- input-group-prepend
- input-group-text
- form-control
Algo para destacar, en tu código veo que usas las clases col-md-1 col-md-offset-2
y col-md-8
, sin embargo están huérfanas, o no has incluido en tu código el contenedor tipo row
. La documentación de Bootstrap - Grid Layout establece lo siguiente: (traducción propia)
- Las Filas son empaques o envoltorios para Columnas. Cada columna tiene un
padding
horizontal (conocido como gutter
) para controlar el espacio entre las mismas....
- En un esquema de rejilla (grid layout), el contenido debe colocarse dentro de columnas, y sólo elementos de columna pueden ser hijos inmediatos de elementos fila.
Dicho esto, debes siempre usar un contenedor tipo row
para usar los contenedores tipo col
, los cuales serán siempre los hijos directos del contenedor row
.
Por último el código que hace que todo funcione es el siguiente, has de notar que no uso ningún estilo css
distinto del que me proporciona Bootstrap.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="form-group">
<div class="row justify-content-center mt-4">
<div class="col-6 col-md-4">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping"><i class="fa fa-user bigicon"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
</div>
</div>
</div>
</div>
Como puedes apreciar en el código, todo tiene un orden y con las clases de Bootstrap las cosas se ven bastante bien.
Puede leer más en Bootstrap - Input Group, para que veas las posibilidades que ofrece.
Espero que esto sea lo que buscabas.