Merge pull request #11169 from systimotic/fix/bootstrap-grid-text-in-image

Fix text in image accessiblity in Bootstrap grid challenge

seed/challenges/01-front-end-development-certification/bootstrap.json

@@ -794,7 +794,7 @@
       "description": [
         "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
         "Here's a diagram of how Bootstrap's 12-column grid layout works:",
-        "<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
+        "<a href=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to view in the Bootstrap documentation\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
         "Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
         "In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
         "Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code>&#60;div class=\"row\"&#62;</code> element, then each of them within a <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
@@ -876,7 +876,7 @@
           "description": [
             "Bootstrap utiliza un sistema de cuadrícula adaptativa que facilita el poner elementos en fila y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento <code>div</code>.",
             "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
-            "<a href=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
+            "<a href=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Click to view in the Bootstrap documentation\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
             "En esta ilustración se está utilizando la clase <code>col-md-*</code>. Aquí, <code>md</code> significa mediano, y <code>*</code> es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.",
             "En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
             "Pon los botones de <code>Like</code>, <code>Info</code> y <code>Delete</code> lado a lado. Esto se hace anidando los tres botones dentro de un elemento <code>&#60;div class=\"row\"&#62;</code>, y luego cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>.",
@@ -888,7 +888,7 @@
           "description": [
             "Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément <code>div</code>",
             "Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:",
-            "<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
+            "<a href=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
             "Notez que dans cet exemple, nous avons utilisé la classe <code>col-md-*</code>. Ici, <code>md</code> signifie medium, et <code>*</code> donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.",
             "Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons <code>col-xs-*</code>, où <code>xs</code> signifie extrêmement petit (comme un écran de téléphone mobile), et <code>*</code> est le nombre de colonnes en largeur de l'élément.",
             "Mettez les boutons <code>Like</code>, <code>info</code> et <code>Delete</code> côte-à-côte en les enveloppant tous dans un élément <code>&#60;div class=\"row\"&#62;</code>, puis chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",