Capítulo 1. Primeros pasos (Bootstrap 4, el manual oficial)

¿Quieres empezar a utilizar Bootstrap lo más rápidamente posible en tus proyectos? Utiliza BootstrapCDN, un servicio gratuito ofrecido por la empresa StackPath. ¿Prefieres usar un gestor de paquetes como npm, yarn o Composer? ¿Prefieres utilizar directamente el código fuente original? En este capítulo conocerás todas las formas posibles de utilizar Bootstrap.

Los archivos CSS de Bootstrap

Usando el servicio de BootstrapCDN, puedes incluir Bootstrap en tus proyectos añadiendo la siguiente línea en todas tus páginas:

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

La URL concreta y el valor del atributo integrity dependen de cada versión de Bootstrap. Visita el sitio BootstrapCDN para obtener siempre la versión más reciente.

Los archivos JavaScript de Bootstrap

Muchos de los componentes de Bootstrap requieren JavaScript para funcionar. En concreto, requieren jQuery, Popper.js y los propios plugins creados por Bootstrap. Para enlazarlos, añade las siguientes líneas justo antes de la etiqueta </body> de cierre.

Aunque recomendamos el uso de jQuery's Slim, la versión completa de jQuery también funciona:

<!-- ... -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

El orden en el que se enlazan los archivos JavaScript tiene que ser exactamente ese: primero jQuery, luego Popper y luego Bootstrap. Las URLs correctas para cada versión de esas librerías las puedes encontrar visitando cada uno de los sitios que las alojan.

Nota Si utilizas nuestro archivo bootstrap.bundle.js (o bootstrap.bundle.min.js) la librería Popper ya está incluida, pero jQuery no.