Created
November 3, 2025 22:24
-
-
Save josejuansanchez/5cb8b2e6c2c6990041df6120ddce4a98 to your computer and use it in GitHub Desktop.
Ejemplo que muestra el ancho de la ventana y el ancho de un container de Bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bootstrap Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </head> | |
| <body> | |
| <p id="ancho"></p> | |
| <p id="anchocontainer"></p> | |
| <div class="container" style="border: 1px solid black;" id="container"> | |
| <h1>My First Bootstrap Page</h1> | |
| <p>This part is inside a .container class.</p> | |
| <p>The .container class provides a responsive fixed width container.</p> | |
| <p>Resize the browser window to see that the container width will change at different breakpoints.</p> | |
| </div> | |
| <script> | |
| // Función que actualiza el ancho en pantalla | |
| function mostrarAncho() { | |
| const ancho = window.innerWidth; | |
| document.getElementById("ancho").textContent = ancho + " px"; | |
| } | |
| // Mostrar el ancho al cargar la página | |
| mostrarAncho(); | |
| // Actualizar automáticamente si el usuario cambia el tamaño de la ventana | |
| window.addEventListener("resize", mostrarAncho); | |
| // Función que actualiza el ancho del container | |
| function mostrarAnchoContainer() { | |
| const container = document.getElementById('container'); | |
| const ancho = container.offsetWidth; | |
| document.getElementById('anchocontainer').textContent = `Ancho actual: ${ancho}px`; | |
| } | |
| // Mostrar al cargar la página | |
| mostrarAnchoContainer(); | |
| // Actualizar al redimensionar la ventana | |
| window.addEventListener('resize', mostrarAnchoContainer); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment