Carrousel Basíco:
Aplique .carousel y .slide a un contenedor externo (con su propia ID).
Para los contenidos desplazables, ajuste todos los elementos en un .carousel-inner y otorgue a cada elemento una clase de elemento .carousel.
Además, debe aplicar .active a una de las diapositivas en el carrusel, de lo contrario, el carrusel no estará visible. Esta clase le permite establecer una diapositiva como la diapositiva inicial (es decir, la diapositiva de inicio).
Controles:
Para agregar controles "Anterior / Siguiente", use un con .carousel-control-prev o carrusel-control-next. También agregue un con .carousel-control-prev-icon o .carousel-control-next-icon.
Para atender a los lectores de pantalla, agregue s con las palabras "Anterior" o "Siguiente" y asígneles la clase .sr-only. Esto ocultará este texto de los navegadores, pero leerá el texto en los lectores de pantalla.
Indicadores
Para agregar controles "indicadores" (las pequeñas áreas clicables en la parte inferior, centro), agregue una lista con los indicadores .carousel, así como los atributos aplicables .data-target y .data-slide-to.
El Modal es básicamente una ventana emergente que se mostrará al hacer clic en un elemento como botón o enlace de texto. Utiliza JavaScript para mostrar el contenido al hacer clic con efecto lightbox. El menú emergente modal se puede cerrar haciendo clic en el botón Cerrar o haciendo clic fuera de la ventana modal. Modal también se refiere con muchos otros nombres como popup, diálogo o alerta. Tenga en cuenta que esta alerta es una alert emergente diferente al componente de alert Bootstrap original.
Un modal en Bootstrap 4 contiene dos componentes: botón y ventana modal. A continuación se muestra el código del botón para un modal:
El atributo data-toggle = "modal" se usa para identificar el botón como un componente modal. El siguiente es el data-target = "# Modal1" que es un ID debe ser único. Este mismo ID debe ser utilizado en el componente modal. A continuación se muestra el código para el menú emergente modal: