CursosEmpresasBlogLiveConfEventosPrecios

0:0010:59

Recursos

Resumen

Aprende a integrar Bootstrap en Angular con pasos claros, comandos exactos y ejemplos listos para copiar. Verás cómo instalar con npm, referenciar bootstrap.min.css en Angular CLI, aplicar estilos a listas, usar el sistema de 12 columnas y agregar una navbar personalizable. Todo con un enfoque práctico y responsive.

¿Cómo instalar Bootstrap con npm en Angular?

Para comenzar, se verifica en npm que el paquete se llame “Bootstrap” y se instala con privilegios de administrador. Luego se referencia su CSS minificado en Angular CLI y se reinicia el servidor para compilar los cambios.

  • Verifica el paquete en npm js antes de instalar.
  • Instala desde consola con permisos de administrador.
  • Agrega bootstrap.min.css en el arreglo de styles de Angular CLI.
  • Reinicia el dev server con ng serve.
sudo npm install bootstrap

En .angular-cli.json, añade bootstrap.min.css como primer elemento del arreglo styles.

{
  "apps": [
    {
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]
    }
  ]
}

Reinicia la app para que Angular relea la configuración:

# Detén el servidor
Ctrl + C
# Inicia de nuevo
ng serve

Consejo práctico: busca “Bootstrap” en la pestaña Elements del browser para validar que cargó la hoja de estilo. En el ejemplo se identifica la versión 3.3.7 de Twitter Bootstrap.

¿Cómo aplicar estilos de listas y contenedores responsivos?

Se aprovechan clases listas para usar, sin escribir CSS manual. La idea es mejorar la lista de lugares y añadir un margen automático con container.

¿Cómo estilizar una lista con list-group?

Toma la estructura de la documentación y añade las clases correspondientes a la UL y a cada LI:

<ul class="list-group">
  <li class="list-group-item">Negocio 1</li>
  <li class="list-group-item">Negocio 2</li>
  <li class="list-group-item">Negocio 3</li>
</ul>
  • UL con clase list-group.
  • LI con clase list-group-item.
  • Estilo limpio sin viñetas, con espaciado agradable.

¿Cómo agregar margen con container sin afectar el mapa?

Deja el mapa a ancho completo y envuelve el resto del contenido en un div con container para obtener márgenes automáticos según el ancho de pantalla.

<!-- Mapa a ancho completo aquí -->
<div class="container">
  <!-- Contenido con márgenes responsivos -->
</div>
  • El margen se ajusta según el tamaño de pantalla.
  • En móviles y tablets, se optimiza el espacio visible.

¿Cómo estructurar el layout con el grid y una navbar?

Bootstrap ofrece un grid de 12 columnas para dividir el contenido en proporciones flexibles. Además, es sencillo incorporar una barra de navegación superior.

¿Cómo dividir en 75% y 25% con el grid?

Usa row para activar el grid y combina col-md-8 con col-md-4 para la proporción 8/4. Añade encabezados semánticos como H2.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h2>Lugares cercanos</h2>
      <!-- Lista principal -->
    </div>
    <div class="col-md-4">
      <h2>Destacados</h2>
      <!-- Publicidad o sección secundaria -->
    </div>
  </div>
</div>
  • row activa el sistema de rejilla.
  • col-md-8 ocupa 8/12 del ancho.
  • col-md-4 ocupa 4/12 del ancho.

¿Cómo agregar y personalizar una navbar?

Copia una navbar de la documentación, elimina lo que no uses (listas o formularios extra) y personaliza el texto:

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Platzi Square</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </div>
</nav>

Si prefieres un tema oscuro, cambia la clase principal:

<nav class="navbar navbar-inverse">
  <!-- mismo contenido -->
</nav>
  • navbar-default: tema claro.
  • navbar-inverse: tema oscuro, enlaces claros.
  • Personaliza “Brand” y los enlaces a “Inicio” y “Contacto”.

Habilidades y keywords que practicas aquí: instalación con npm, configuración de Angular CLI en .angular-cli.json, referencia a node_modules, uso de clases CSS de Bootstrap (list-group, list-group-item, container, row, col-md-8, col-md-4, navbar-default, navbar-inverse), reinicio de servidor con ng serve y verificación en DevTools.

¿Te gustaría comentar cómo estructurarías tus columnas o qué componentes agregarías después de la navbar? Comparte tus dudas y mejoras posibles.

Configurando e implementando Bootstrap en nuestro proyecto

Curso de Angular 4

Clase 23 de 80

Clase 23 / 80