1

Tengo el siguiente formulario hecho con bootstrap y no me esta poniendo la fecha de inicio y hora de fin en la misma fila. Aquí muestro una imagen como se mira, trato de poner los col-md-6 y no me los esta tomando:

introducir la descripción de la imagen aquí

En esta parte tengo explicado como quisiera que se viera mi formulario, es decir que la Fecha de inicio y la Hora de inicio quede en la misma fila, lo mismo para la Fecha de fin y la hora de fin, ASI QUIERO QUE SE VEA: introducir la descripción de la imagen aquí

En esta parte comparto el código donde se encontrara un botón de Abrir Modal y se podrá ver el formulario:

<!DOCTYPE html>
<html>
    <head>
        <title>Calendario WEB</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    <body>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#form-events">
            Abrir Modal
        </button>
        <!-- Formulario de Eventos -->
        <div class="modal fade" id="form-events" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background:#293145;">
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="Id">
                        <div class="form-row">
                            <div class="form-group col-12">
                                <label>Titulo del Evento:</label>
                                <input type="text" id="title-event" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Fecha de inicio:</label>
                                <div class="input-group" data-autoclose="true">
                                    <input type="date" id="start-date" class="form-control" value="">
                                </div>
                            </div>
                            <div class="form-group col-md-6" id="title-hour-start">
                                <label>Hora de inicio:</label>
                                <div class="input-group clockpicker" data-autoclose="true">
                                    <input type="text" id="start-time" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Fecha de fin:</label>
                                <div class="input-group" data-autoclose="true">
                                    <input type="date" id="end-date" class="form-control" value="">
                                </div>
                            </div>
                            <div class="form-group col-md-6" id="title-hour-end">
                                <label>Hora de fin:</label>
                                <div class="input-group clockpicker" data-autoclose="true">
                                    <input type="text" id="end-time" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <label>Descripción:</label>
                            <textarea id="description-event" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="form-row">
                            <label>Color de fondo:</label>
                            <input type="color" value="#3788D8" id="color-font" class="form-control" style="height: 36px;">
                        </div>
                        <div class="form-row">
                            <label>Color de texto:</label>
                            <input type="color" value="#FFFFFF" id="color-text" class="form-control" style="height: 36px;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn-add-event" class="btn btn-success">Agregar</button>
                        <button type="button" id="btn-modify-event" class="btn btn-success">Modificar</button>
                        <button type="button" id="btn-remove-event" class="btn btn-success">Eliminar</button>
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

1
  • 1
    Es fundamental que menciones qué versión de Boostrap estás utilizando. Al parecer, utilizás la versión 5, en donde form-row es eliminada. La documentación misma sugiere usar en su reemplazo la grilla de BS y sus utilidades.
    – padaleiana
    el 1 jun. a las 17:42

2 respuestas 2

1

Tienes que usar la clase row en vez de form-row, ya que la clase form-row ha sido eliminada a partir de la versión 5 de Bootstrap, así funcionarían tus rejillas (que son las clases col-md-6) que tienes dentro:

<div class="row"> <!-- usamos el "row" -->
  <div class="form-group col-md-6">
    <!-- ... -->
  </div>
  <div class="form-group col-md-6" id="title-hour-start">
    <!-- ... -->
  </div>
</div>
<div class="row"> <!-- usamos el "row" -->
  <div class="form-group col-md-6">
    <!-- ... -->
  </div>
  <div class="form-group col-md-6" id="title-hour-end">
    <!-- ... -->
  </div>
</div>

Demo:

<!DOCTYPE html>
<html>
  <head>
    <title>Calendario WEB</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </head>
  <body>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#form-events">
      Abrir Modal
    </button>
    <!-- Formulario de Eventos -->
    <div class="modal fade" id="form-events" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header" style="background:#293145;">
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">x</span>
            </button>
          </div>
          <div class="modal-body">
            <input type="hidden" id="Id">
            <div class="row">
              <div class="form-group col-12">
                <label>Titulo del Evento:</label>
                <input type="text" id="title-event" class="form-control" placeholder="">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-6">
                <label>Fecha de inicio:</label>
                <div class="input-group" data-autoclose="true">
                  <input type="date" id="start-date" class="form-control" value="">
                </div>
              </div>
              <div class="form-group col-md-6" id="title-hour-start">
                <label>Hora de inicio:</label>
                <div class="input-group clockpicker" data-autoclose="true">
                  <input type="text" id="start-time" class="form-control" autocomplete="off">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-6">
                <label>Fecha de fin:</label>
                <div class="input-group" data-autoclose="true">
                  <input type="date" id="end-date" class="form-control" value="">
                </div>
              </div>
              <div class="form-group col-md-6" id="title-hour-end">
                <label>Hora de fin:</label>
                <div class="input-group clockpicker" data-autoclose="true">
                  <input type="text" id="end-time" class="form-control" autocomplete="off">
                </div>
              </div>
            </div>
            <div class="form-row">
              <label>Descripción:</label>
              <textarea id="description-event" class="form-control" rows="3"></textarea>
            </div>
            <div class="form-row">
              <label>Color de fondo:</label>
              <input type="color" value="#3788D8" id="color-font" class="form-control" style="height: 36px;">
            </div>
            <div class="form-row">
              <label>Color de texto:</label>
              <input type="color" value="#FFFFFF" id="color-text" class="form-control" style="height: 36px;">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="btn-add-event" class="btn btn-success">Agregar</button>
            <button type="button" id="btn-modify-event" class="btn btn-success">Modificar</button>
            <button type="button" id="btn-remove-event" class="btn btn-success">Eliminar</button>
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancelar</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

1
  • form-row existía hasta Bootstrap 4. Probablemente esté usando la versión 5 (por lo tanto se podría eliminar esa clase sin problema en la respuesta) (?
    – padaleiana
    el 1 jun. a las 17:39
1

La clase form-row no se de donde la sacaste, pero en tu código no hace nada. Debes reemplazarla por row, por lo menos en las filas que tengan más de una columna

<!DOCTYPE html>
<html>
    <head>
        <title>Calendario WEB</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    <body>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#form-events">
            Abrir Modal
        </button>
        <!-- Formulario de Eventos -->
        <div class="modal fade" id="form-events" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background:#293145;">
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="Id">
                        <div class="form-row">
                            <div class="form-group col-12">
                                <label>Titulo del Evento:</label>
                                <input type="text" id="title-event" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label>Fecha de inicio:</label>
                                <div class="input-group" data-autoclose="true">
                                    <input type="date" id="start-date" class="form-control" value="">
                                </div>
                            </div>
                            <div class="form-group col-md-6" id="title-hour-start">
                                <label>Hora de inicio:</label>
                                <div class="input-group clockpicker" data-autoclose="true">
                                    <input type="text" id="start-time" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label>Fecha de fin:</label>
                                <div class="input-group" data-autoclose="true">
                                    <input type="date" id="end-date" class="form-control" value="">
                                </div>
                            </div>
                            <div class="form-group col-md-6" id="title-hour-end">
                                <label>Hora de fin:</label>
                                <div class="input-group clockpicker" data-autoclose="true">
                                    <input type="text" id="end-time" class="form-control" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <label>Descripción:</label>
                            <textarea id="description-event" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="form-row">
                            <label>Color de fondo:</label>
                            <input type="color" value="#3788D8" id="color-font" class="form-control" style="height: 36px;">
                        </div>
                        <div class="form-row">
                            <label>Color de texto:</label>
                            <input type="color" value="#FFFFFF" id="color-text" class="form-control" style="height: 36px;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn-add-event" class="btn btn-success">Agregar</button>
                        <button type="button" id="btn-modify-event" class="btn btn-success">Modificar</button>
                        <button type="button" id="btn-remove-event" class="btn btn-success">Eliminar</button>
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

4
  • 1
    form-row existía hasta Bootstrap 4. Probablemente esté usando la versión 5.
    – padaleiana
    el 1 jun. a las 17:40
  • @padaleiana La está usando, él agrego esa versión en su ejemplo mínimo verificable
    – Yussef
    el 1 jun. a las 17:51
  • Sí. Cosas que pasan cuando uno da un vistazo muy rápido (?
    – padaleiana
    el 1 jun. a las 17:57
  • @padaleiana MUAJAJA le he ganado al ojo de águila de padaleiana :)
    – Yussef
    el 1 jun. a las 18:10

Tu Respuesta

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

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