1

Debo implementar un Input group de bootstrap pero todo el sitio tiene una librería des-actualizada y me dicen que como no puedo hacerlo entonces debo hacerlo manualmente... Como puedo copiar ese diseño y pasarlo a mi código? Dejo el ejemplo de lo que quiero tener en mi código. Gracias !

    <body>
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <span class="input-group-text" id="basic-addon2">Información</span>
        </div>
      </div>
      <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">     
</body>

2
  • que versión tienes de bootstrap ? el 21 mar. 2019 a las 17:05
  • Si quieres copiar solamente los estilos, puedes usar el Inspector de Elementos del navegador con Click derecho > Inspeccionar, o Ctrl + Shift + I y copiar el css puro del elemento
    – gmarsi
    el 21 mar. 2019 a las 17:08

2 respuestas 2

1

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

.input-group-append {
    margin-left: -1px;
}
.input-group-append, .input-group-prepend {
    display: -ms-flexbox;
    display: flex;
}

.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
<body>
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <span class="input-group-text" id="basic-addon2">Información</span>
        </div>
      </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
</body>

Este es el CSS de bootstrap 4.

1
  • Hola ! Muchas gracias por tu ayuda, me sirvió de mucho porque pude solucionar el problema. Por último sabes como establecer el tamaño de esa etiqueta que queda pegada al textbox? Gracias amigo ! el 21 mar. 2019 a las 22:23
1

No pusiste que versión de Bootstrap tienen, entonces haciendolo en HTML y CSS puro encontré una solución así:

/*QuickReset*/
*{margin:0;box-sizing:border-box;}
html,body{height:100%;font:14px/1.4 sans-serif;}
input, textarea{font:14px/1.4 sans-serif;}

.input-group{
  display: table;
  border-collapse: collapse;
  width:100%;
}
.input-group > div{
  display: table-cell;
  border: 1px solid #ddd;
  vertical-align: middle;  /* needed for Safari */
}
.input-group-icon{
  background:#eee;
  color: #777;
  padding: 0 12px
}
.input-group-area{
  width:100%;
}
.input-group input{
  border: 0;
  display: block;
  width: 100%;
  padding: 8px;
}
<div class="input-group">
  <div class="input-group-icon">@</div>
  <div class="input-group-area"><input type="text" placeholder="Email Address"></div>
</div>
	
<div class="input-group">
  <div class="input-group-icon">Income:</div>
  <div class="input-group-area"><input type="text" value="0.00"></div>
  <div class="input-group-icon">$</div>
</div>

La solución esta en: https://stackoverflow.com/questions/45786511/what-is-best-way-to-create-input-group-like-bootstrap-but-without-flex

Espero te sea de ayuda, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.