0

Buenas estoy intentando ponerle un titulo pequeño a cada div algo como un h4 o h5 pero no se como hacer para posicionarlo bien. Ademas estoy tratando de poner lineas de separación entre las cajas pero utilizo hr y no cambia nada, las lineas de separacion no aparecen.

<div class="producto form-row">

                        <div class="form-group col-md-3">
                            <label for="ptype_id">Tipo de Producto</label>
                            <select name="ptype_id" class="form-control" required>
                              <option value="">Seleccionar</option>
                              @foreach ($ptypes as $ptype)
                              <option value="{{ $ptype->id }}">{{ $ptype->productType }}</option>
                              @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="brand_id">Marca</label>
                            <select name="brand_id" class="form-control" required id="select-brand">
                              <option value="">Seleccionar</option>
                              @foreach ($brands as $brand)
                              <option value="{{ $brand->id }}">{{ $brand->brandName }}</option>
                              @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="model_id">Modelo</label>
                            <select name="model_id" class="form-control" id="select-model" required>
                              <option value="">Seleccionar</option>
                              
                            </select>
                        </div>
                    </div>
                    
                    <div class="costo form-row">
                        <div class="title" style="position: absolute; ">
                            <h5>Costo</h5>
                        </div>
                        
                        <div class="form-group col-md-4">
                          <label for="coin">Moneda</label>
                          <select name="coin" class="form-control" required>
                            <option value="">Moneda </option>
                            <option value="ARS">ARS</option>
                            <option value="USD">USD-O</option>
                            <option value="USDB">USD-B</option>                            
                            <option value="EUR">EUR</option>
                            
                          </select>
                      </div>
                    
                        <div class="form-group col-md-2">
                            <label for="cost">Costo</label>
                            <input type="number"   step="00.01" name="cost" class="form-control" required>
                        </div> 

                    <div class="form-group col-md-2">
                        <label for="fob">Costo Fob</label>
                        <input type="number"   step="00.01" name="fob" class="form-control" required>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="costUSD">Costo USD</label>
                        <input type="number"   step="00.01" name="costUSD" class="form-control" required>
                    </div>


                    <div class="form-group col-md-2">
                        <label for="costUSDB">Costo USDB</label>
                        <input type="number"   step="00.01" name="costUSDB" class="form-control" required>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="costNacionalizacion">Costo Nacionalizacion</label>
                        <input type="number"   step="00.01" name="costNacionalizacion" class="form-control" required>
                    </div>


                    <div class="form-group col-md-2">
                        <label for="costARS">Costo ARS</label>
                        <input type="number"   step="00.01" name="costARS" class="form-control" required>
                    </div>
                </div>

Por ejemplo en el div con clase producto quiero que haya un titulo que diga "informacion del producto" y abajo los campos del formulario de ese div. Y cuando finaliza el div un


para separar del div con clase costo. Pero no logro posicionarlos bien.

2
  • Para ti ¿qué es "posicionarlo bien"?. No se ve ningún <hr>.
    – Sal
    el 5 oct. 2021 a las 1:28
  • @Sal Lo quite porque no se visualizaba nada con el hr, cuando inspeccionaba el elemento me lo mostraba invisible, y en otra parte de la página.
    – MateoG98
    el 5 oct. 2021 a las 13:35

1 respuesta 1

1

Entre tus elementos div puedes colocar títulos con la clase separador-titulo, añade los estilos en tu código y deberías de tener unos separadores muy estéticos para tu proyecto.

#home .general-container .separador-titulo {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
}

#home .general-container .separador-titulo h1 {
    padding: 0 15px;
    text-align: center;
    margin: 0em auto;
    background: #fff;
    z-index: 1;
    color: #302878;
    text-transform: uppercase;
}

#home .general-container .separador-titulo .linea {
    width: 100%;
    height: 1px;
    background: #d0d3d4;
    margin-top: -1em;
}
<body id="home">
  <div class="general-container">
    <div> Algo de contenido</div>
    <div class="separador-titulo">
      <h1>Título</h1>
      <div class="linea"></div>
    </div>
    <div> Algo de contenido</div>
    <div class="separador-titulo">
      <h1>Título</h1>
      <div class="linea"></div>
    </div>
  </div>
</body>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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