Como instalar y usar Bootstrap

Name: Como instalar y usar Bootstrap
Brand: Jose Aguilar
SKU: joseaguilarblog-6724
Availability: InStock
Rating: 5 (15 reviews)

Bootstrap se puede instalar de distintas formas. Una forma sencilla de hacerlo es visitar la página oficial de Bootstrap y descargar el paquete.

De esta forma, puedes tener los archivos de este framework en tu servidor.

El paquete de descarga lo puedes descomprimir en la raiz de tu proyecto o en el directorio que tu quieras.

En los archivos de instalación de Bootstrap puedes ver un directorio donde están las hojas de estilo (css), otro directorio para los ficheros JavasScript (js) y un directorio de fuentes (fonts) donde se encuentra la fuente por defecto para los iconos que utiliza Bootstrap. La fuente que utiliza Bootstrap para los iconos se llama Glyphicons.

Revisando el archivo de descarga, puedes observar que Bootstrap se puede adaptar a cualquier tipo de proyecto destinado a la Web ya sea desarrollado desde 0 o con algún gestor de contenidos como WordPress o Joomla, o para cualquier plataforma de e-commerce como por ejemplo PrestaShop o Magento.

Para poder trabajar con Bootstrap tan solo debes añadir en la cabecera, dentro de la etiqueta <head> o antes de la etiqueta de cierre </body> de tu archivo HTML las hojas de estilo y el archivo JavaScript de Bootstrap.

Source code

<link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" crossorigin="anonymous">
<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>

También existe la posibilidad de no descargar nada y utilizar los CDN (Content Delivery Network) copiando lo siguiente en la cabecera <head> de tu archivo HTML.

Source code

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Para descargar los archivos o ver los enlaces que necesitas para tu cabecera puedes visitar el enlace de descarga de Bootstrap.

Ver Hola Mundo con Bootstrap 4

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(15 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

9 respuestas a “Como instalar y usar Bootstrap”

José Clotario Aguilar dice:

01/09/2023 a las 10:02

Me encanta,soy nuevo en eso y me gustaría aprender mucho más sobre bootstrap ya k tengo conocimientos en Html

Responder
Luz pIna dice:

22/11/2022 a las 13:08

Buenos dias..Sr..no comprendo mire ..tengo la pagina de index que forme con html5 y baje unas direcciones pero no se si se forma una pagina nueva distnta al de html o como hago vi por ahi que como tocaba el idndcoadr menor que perno se si se usa el mouse como se utliza ademas le digo es una pagina distinta al index fue qeu cambio la paginaGracias por su interres gracias por su ayuda a

Responder
- Jose Aguilar dice:
  
  14/12/2022 a las 17:33
  
  Hola, si no he entendido mal, para lo que requieres da igual si usas la página index o otra con otro nombre, mientras la escribas en el navegador, debería reflejarse de igual modo.
  
  Responder
Armando Martìnez dice:

11/11/2021 a las 11:20

el enlace https://getbootstrap.com/docs/5.1/getting-started/introduction/ (1) de esta página comparado con el enlace
https://getbootstrap.com/docs/4.0/getting-started/download/ (2) confunde a la hora de utilizarlos. Mi pregunta es cual de los dos
es el indicado a utilizar en los proyectos que irá a producción. Si no hubiese tenido diferente comportamiento en mi proyecto,
no habría problema en utilizarlos indistintamente, pero, cuando utilicé lo de este enlace (1), tuve problemas al
desplegar datos mediante card-columns, que en vez de desplegar primeramente línea por línea, me ha desplegado en una sola columna
no así con el enlace siguiente (2). Espero haberme explicado. Gracias.

Responder
- Jose Aguilar dice:
  
  15/11/2021 a las 18:08
  
  Hola Armando,
  
  Lo ideal es utilizar la última versión pero debes tener en cuanta que tendrá cambios respecto a lo que se comenta en este blog que hace referencia a la versión anterior.
  
  Saludos
  
  Responder
“Como instalar y usar Bootstrap – Jose Aguilar Blog” https://www.jose-aguilar.com/blog/como-instalar-y-usar-bootstrap/ – recarga lista dice:

03/08/2019 a las 12:43

[…] “Como instalar y usar Bootstrap – Jose Aguilar Blog” https://www.jose-aguilar.com/blog/como-instalar-y-usar-bootstrap/ […]

Responder
Cómo crear tablas con Bootstrap 4 - Jose Aguilar Blog dice:

24/07/2019 a las 10:44

[…] tablas a tu página web, debes incluir primero Bootstrap. En el siguiente artículo puedes ver como instalar y usar Boostrap en tus […]

Responder
Bootstrap - Introducción e índice de contenido - Jose Aguilar Blog dice:

18/06/2019 a las 10:29

[…] Como instalar y usar Bootstrap […]

Responder
Bootstrap - Introducción e índice de contenido - Jose Aguilar dice:

04/02/2016 a las 15:08

[…] Como instalar y usar Bootstrap […]

Responder