Fix/ btn-block Bootstrap challenge

Fixes issue with image for describing the difference between btn and
btn-block. The image was deemed confusing with regards to the Bootstrap
btn classes

PR updated inline with feedback

More detailed description give with regards to `btn` and `btn-block` classes

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

@@ -365,9 +365,14 @@
       "id": "bad87fee1348cd8acef08812",
       "title": "Create a Block Element Bootstrap Button",
       "description": [
-        "Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a \"new line\" below the block.",
-        "This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
-        "<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
+        "Normally, your <code>button</code> elements with a class of <code>btn</code> are only as wide as the text that they contain. For example:",
+        "<code>&lt;button class=\"btn\"&gt;Submit&lt;/button&gt;</code>",
+        "This button would only be as wide as the word \"Submit\".",
+        "<button class='btn' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Submit</button>",
+        "By making them block elements with the additional class of <code>btn-block</code>, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a \"new line\" below the block.",
+        "<code>&lt;button class=\"btn btn-block\"&gt;Submit&lt;/button&gt;</code>",
+        "This button would take up 100% of the available width.",
+        "<button class='btn btn-block' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Submit</button>",
         "Note that these buttons still need the <code>btn</code> class.",
         "Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
       ],
@@ -440,17 +445,27 @@
       "challengeType": 0,
       "titleEs": "Crea un elemento botón de bloque con Bootstrap",
       "descriptionEs": [
-        "Normalmente, tus elementos <code>button</code> son sólo tan anchos como el texto que contienen. Al convertir un botón en elemento a nivel de bloque, este se estirará para llenar todo el espacio horizontal y cualquier elemento que lo siga se desplazará a una \"nueva línea\" debajo del bloque.",
-        "Esta imagen es un ejemplo de la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
-        "<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira hasta llenar todo el espacio horizontal.'></a>",
+        "Normalmente , los elementos de <code>button</code> con una clase de <code>btn</code> sólo son tan ancha como el texto que contienen. Por ejemplo:",
+        "<code>&lt;button class=\"btn\"&gt;Enviar&lt;/button&gt;</code>",
+        "Este botón sólo sería tan amplia como la palabra \"Enviar\"",
+        "<button class='btn' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Enviar</button>",
+        "Haciéndolos bloquean elementos con la clase adicional de <code>btn-block</code>, el botón se amplía para llenar toda espacio horizontal de la página y los elementos siguientes fluirá sobre una \"nueva línea\" debajo del bloque .",
+        "<code>&lt;button class=\"btn btn-block\"&gt;Enviar&lt;/button&gt;</code>",
+        "Este botón llevaría hasta el 100% de la anchura disponible.",
+        "<button class='btn btn-block' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Enviar</button>",
         "Ten en cuenta que estos botones todavía necesitan la clase <code>btn</code>.",
         "Agrega la clase de Bootstrap <code>btn-block</code> a tu botón Bootstrap."
       ],
       "nameFr": "Créer un bouton bloc Bootstrap",
       "descriptionFr": [
-        "Normalement, vos éléments <code>button</code> sont aussi large que le texte qu'ils contiennent. En les transformants en éléments blocs, vos boutons vont s'ajuster pour remplir l'intégralité de l'espace horizontal de la page et tous les éléments qui le suivront se placeront sur une \"nouvelle ligne\" en dessous du bloc.",
-        "Cette image illustre la différence entre éléments <code>inline</code> (sans briser la ligne) et éléments <code>block-level</code> (en blocs)",
-        "<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour agrandir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, il est centré. En dessous de celui-ci il y a un bouton \"block-level\" , qui s'étire et remplit l'espace horizontal.'></a>",
+        "Normalement , vos éléments de <code>button</code> avec une classe de <code>btn</code> ne sont aussi larges que le texte qu'ils contiennent . Par exemple:",
+        "<code>&lt;button class=\"btn\"&gt;Soumettre&lt;/button&gt;</code>",
+        "Ce bouton ne serait plus large que le mot \"Soumettre\" .",
+        "<button class='btn' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Soumettre</button>",
+        "En leur faisant bloquer les éléments avec la classe supplémentaire de <code>btn-block</code>, votre bouton étirer pour remplir tout l'espace horizontal de votre page et tous les éléments suivants, il coulera sur une \"nouvelle ligne\" en dessous du bloc .",
+        "<code>&lt;button class=\"btn btn-block\"&gt;Soumettre&lt;/button&gt;</code>",
+        "Ce bouton prendrait 100% de la largeur disponible .",
+        "<button class='btn btn-block' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>Soumettre</button>",
         "Notez que ces boutons ont toujours besoin de la classe <code>btn</code>",
         "Ajoutez la classe Bootstrap <code>btn-block</code> à votre bouton Bootstrap."
       ]