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:
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:
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>
form-row
es eliminada. La documentación misma sugiere usar en su reemplazo la grilla de BS y sus utilidades.