Emplear un CDN para cargar Bootstrap 5

En el concepto anterior vimos que para trabajar con el framework Bootstrap 5 debemos descargarlo del sitio http://getbootstrap.com.

Hay una segunda forma de trabajar con Bootstrap sin tener que descargar el framework y consiste en utilizar un servidor donde se alojan todos los archivos de Bootstrap.

Si vamos a utilizar un CDN (Content Delivery Network - red de entrega de contenidos) luego nuestro esqueleto de página html tendrá una estructura similar a esta:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <title>Hola Mundo</title>
  </head>
  <body>
     <div class="container" style="background-color:#ccc"> 
       <h1>Hola Mundo!</h1>
     </div>
     
    <!-- Si utilizamos componentes de Bootstrap que requieran Javascript agregar el siguiente archivo -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
  </body>
</html>

En lugar de cargar el archivo "bootstrap.min.css" de nuestro servidor, lo hacemos del servidor "https://cdn.jsdelivr.net":

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

Las ventajas de utilizar esta forma de cargar el framework Bootstrap 5 es:

Reduce la carga de nuestros servidores (importante si utilizamos un hosting compartido con recursos limitado)
Facilita que Bootstap 5 quede en caché del navegador y se vuelva a cargar cada vez que se visita una web que lo utilice.
Reduce la latencia.
Reducción de costos de nuestros servidores por requerir menor ancho de banda y tráfico.

Como desventaja podríamos decir:

Esta la posibilidad que el servidor donde se aloja Bootstrap 5 se caiga, si bien es mucho más probable que nuestro servidor tenga problemas sobre todo si es un hosting compartido.
No podemos probar en forma local nuestro sitio web si no se encuentra conectado a internet.

Más adelante veremos componentes de Bootstrap 5 que si las utilizamos debemos importar un archivo Javascript. Este archivo pueden estar en nuestro servidor o inclusive como hemos visto en este concepto estar almacenados en CDN.

El archivo Javascript requerido es:

bootstrap.bundle.min.js

2 - Emplear un CDN para cargar Bootstrap 5

Ejecutar Ejemplo

Retornar