Summary  
This chapter explains how to structure HTML elements and apply Bootstrap’s Navbar component—with classes for branding, toggling, collapsible content, and navigation links—to create a responsive header and navigation bar.

General domain of usage  
Portfolio website development

## 1. Crear una barra de navegación
Comenzar agregando una barra de navegación en la parte superior de la página. Utilizar el componente Navbar de Bootstrap para este propósito.
```html
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Portfolio</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          
        </ul>
      </div>
    </div>
  </nav>
</header>
```

## 2. Agregar enlaces de navegación
Dentro de la clase `navbar-nav`, agregar enlaces de navegación para la página principal, sobre mí, experiencia, habilidades y secciones de contacto.
```html
<ul class="navbar-nav ms-auto">
  <li class="nav-item">
    <a class="nav-link" href="#about">About Me</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#experience">Experience</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+UG9ydGZvbGlvPC90aXRsZT4KICAgIDwhLS0gQm9vdHN0cmFwIENTUyAtLT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQnVpbGQgSGVhZGVyIE5hdmlnYXRpb24gLS0+CiAgICA8aGVhZGVyPgogICAgICA8bmF2IGNsYXNzPSJuYXZiYXIgbmF2YmFyLWV4cGFuZC1sZyBuYXZiYXItbGlnaHQgYmctbGlnaHQiPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8YSBjbGFzcz0ibmF2YmFyLWJyYW5kIiBocmVmPSIjIj5NeSBQb3J0Zm9saW88L2E+CiAgICAgICAgICA8YnV0dG9uCiAgICAgICAgICAgIGNsYXNzPSJuYXZiYXItdG9nZ2xlciIKICAgICAgICAgICAgdHlwZT0iYnV0dG9uIgogICAgICAgICAgICBkYXRhLWJzLXRvZ2dsZT0iY29sbGFwc2UiCiAgICAgICAgICAgIGRhdGEtYnMtdGFyZ2V0PSIjbmF2YmFyU3VwcG9ydGVkQ29udGVudCIKICAgICAgICAgICAgYXJpYS1jb250cm9scz0ibmF2YmFyU3VwcG9ydGVkQ29udGVudCIKICAgICAgICAgICAgYXJpYS1leHBhbmRlZD0iZmFsc2UiCiAgICAgICAgICAgIGFyaWEtbGFiZWw9IlRvZ2dsZSBuYXZpZ2F0aW9uIgogICAgICAgICAgPgogICAgICAgICAgICA8c3BhbiBjbGFzcz0ibmF2YmFyLXRvZ2dsZXItaWNvbiI+PC9zcGFuPgogICAgICAgICAgPC9idXR0b24+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2xsYXBzZSBuYXZiYXItY29sbGFwc2UiIGlkPSJuYXZiYXJTdXBwb3J0ZWRDb250ZW50Ij4KICAgICAgICAgICAgPHVsIGNsYXNzPSJuYXZiYXItbmF2IG1zLWF1dG8iPgogICAgICAgICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPgogICAgICAgICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIiBocmVmPSIjYWJvdXQiPkFib3V0IE1lPC9hPgogICAgICAgICAgICAgIDwvbGk+CiAgICAgICAgICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSI+CiAgICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiNleHBlcmllbmNlIj5FeHBlcmllbmNlPC9hPgogICAgICAgICAgICAgIDwvbGk+CiAgICAgICAgICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSI+CiAgICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiNza2lsbHMiPlNraWxsczwvYT4KICAgICAgICAgICAgICA8L2xpPgogICAgICAgICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPgogICAgICAgICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIiBocmVmPSIjY29udGFjdCI+Q29udGFjdDwvYT4KICAgICAgICAgICAgICA8L2xpPgogICAgICAgICAgICA8L3VsPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICAgIDwhLS0gQXNzaXN0YW50IHNjcmlwdCAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzQzMzNhYjFmLTBhNzItNDMxYy1iOWQwLTczYTc1OTI3MzlkNC9hc3Npc3RhbnQtc2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Explora los principios fundamentales del framework CSS Bootstrap y descubre los secretos para crear sitios web responsivos y visualmente atractivos de manera rápida y eficiente. A través de la exploración práctica de las utilidades clave y la implementación de potentes componentes, obtendrás una experiencia práctica invaluable para optimizar tu flujo de trabajo en desarrollo web utilizando el versátil conjunto de herramientas de Bootstrap.

Explora la esencia de Bootstrap y su evolución desde sus inicios hasta la actualidad, analiza sus ventajas y desventajas, y comprende los requisitos previos para una implementación eficaz.

Explora las opciones de instalación de Bootstrap. Selecciona entre una integración rápida mediante Content Delivery Network (CDN) o un enfoque más personalizado con Node Package Manager (NPM).

Adquirir dominio de los elementos clave de Bootstrap, incluido el versátil sistema de cuadrícula, la tipografía detallada, el uso dinámico de botones, la gestión precisa de márgenes y rellenos, y la creación de formularios efectivos para una interacción fluida del usuario.

Mejore sus habilidades en Bootstrap con temas avanzados que abarcan menús de navegación dinámicos, gestión de imágenes responsivas, diseños de tarjetas versátiles, modales interactivos y carruseles atractivos para experiencias de usuario cautivadoras.

Cree un sitio web de portafolio utilizando el framework Bootstrap con nuestra orientación. Aproveche las potentes características de Bootstrap. Esta sección práctica le ayudará a mostrar sus habilidades, proyectos y logros.

Creación del Encabezado y la Navegación

1. Crear una barra de navegación

2. Agregar enlaces de navegación

Resultado

Awesome!

Creación del Encabezado y la Navegación

1. Crear una barra de navegación

2. Agregar enlaces de navegación

Resultado