{
"name": "Bootstrap",
"order": 2,
"time": "5 hours",
"helpRoom": "Help",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
}
],
"challenges": [
{
"id": "bad87fee1348bd9acdeb9212",
"title": "Introduction to the Bootstrap Challenges",
"description": [
[
"",
"",
"Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality.",
""
],
[
"",
"",
"Bootstrap uses a responsive 12 column grid layout and has design templates for:
buttons
images
tables
forms
navigation
This section introduces some of the ways to use Bootstrap in your web projects.",
""
]
],
"releasedOn": "",
"challengeSeed": [],
"tests": [],
"type": "Waypoint",
"challengeType": 7,
"isRequired": false,
"translations": {}
},
{
"id": "bad87fee1348bd9acde08712",
"title": "Use Responsive Design with Bootstrap Fluid Containers",
"description": [
"In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"You can add Bootstrap to any app by adding the following code to the top of your HTML:",
"<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"/>",
"In this case, we've already added it for you to this page behind the scenes. Note that using either > or /> to close the link tag is acceptable.",
"To get started, we should nest all of our HTML (except the link tag and the style element) in a div element with the class container-fluid."
],
"challengeSeed": [
"",
"",
"",
"
",
"",
""
],
"tests": [
"assert($(\"div\").hasClass(\"container-fluid\"), 'message: Your div element should have the class container-fluid.');",
"assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.');",
"assert($(\".container-fluid\").children().length >= 8, 'message: Make sure you have nested all HTML elements after the closing style tag in .container-fluid.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"es": {
"title": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap",
"description": [
"Ahora vamos de vuelta a nuestra aplicación de fotos de gatos. Esta vez, vamos a darle estilo utilizando la infraestructura CSS del popular Bootstrap.",
"Bootstrap determina qué tan ancha es la pantalla y adapta correspondientemente el tamaño de tus elementos HTML - por eso es que se llama Diseño adaptativo (responsive design).",
"Con diseño adaptativo, no hay necesidad de diseñar una versión móvil para tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.",
"Puedes agregar Bootstrap a cualquier aplicación simplemente incluyendo el siguiente código al inicio de tu HTML:",
"<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>",
"En este caso, lo hemos agregado a esta página por ti.",
"Para iniciar, debemos anidar todo nuestro HTML en un elemento div con la clase container-fluid."
]
},
"fr": {
"title": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap",
"description": [
"Revenons à notre application de photos de chats. Cette fois-ci, nous allons lui donner un style grâce au renommé framework CSS Bootstrap.",
"Bootstrap saura reconnaître la largeur de notre écran et s'y adapter en redimensionnant les éléments HTML - d'où le nom Responsive Design (design adaptatif).",
"Avec le design responsive, il n'y a pas besoin de créer de version mobile de votre site. Il restera bien sur tous les appareils quelle que soit la taille de leurs écrans.",
"Vous pouvez ajouter Bootstrap à n'importe quelle application simplement en incluant le code suivant en haut de votre HTML:",
"<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>",
"Ici, nous l'avons déjà ajouté à la page pour vous dans l'arrière-boutique.",
"Pour commencer, nous devons envelopper nos éléments HTML dans un élément div possédant la classe container-fluid"
]
}
}
},
{
"id": "bad87fee1348bd9acde08812",
"title": "Make Images Mobile Responsive",
"description": [
"First, add a new image below the existing one. Set its src attribute to https://bit.ly/fcc-running-cats.",
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page."
],
"challengeSeed": [
"",
"",
"",
"
"
],
"tests": [
"assert($(\"img\").length === 2, 'message: You should have a total of two images.');",
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'message: Your new image should be below your old one and have the class img-responsive.');",
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'message: Your new image should not have the class smaller-image.');",
"assert($(\"img:eq(1)\").attr(\"src\") === \"https://bit.ly/fcc-running-cats\", 'message: Your new image should have a src of https://bit.ly/fcc-running-cats.');",
"assert(code.match(//g).length === 2 && code.match(/img element has a closing angle bracket.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"es": {
"title": "Haz que las imágenes sean adaptativas en dispositivos móviles",
"description": [
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo src sea https://bit.ly/fcc-running-cats.",
"Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.",
"Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase img-responsive a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página."
]
},
"fr": {
"title": "Rendre des images adaptatives aux appareils mobiles",
"description": [
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page.",
"D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut src en https://bit.ly/fcc-running-cats.",
"Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.",
"Heureusement, avec Bootstrap, il faut seulement ajouter la classe img-responsive à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page."
]
}
}
},
{
"id": "bad87fee1348bd8acde08812",
"title": "Center Text with Bootstrap",
"description": [
"Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this:",
"<h2 class=\"red-text text-center\">your text</h2>"
],
"challengeSeed": [
"",
"",
"",
"
"
],
"tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'message: Your h2 element should be centered by applying the class text-center');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should still have the class red-text');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"es": {
"title": "Centra el texto con Bootstrap",
"description": [
"Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase text-center a nuestro elemento h2.",
"Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:",
"<h2 class=\"red-text text-center\">your text</h2>"
]
},
"fr": {
"title": "Centrer du texte avec Bootstrap",
"description": [
"Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe text-center à notre élément h2.",
"Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:",
"<h2 class=\"red-text text-center\">Votre texte</h2>"
]
}
}
},
{
"id": "bad87fee1348cd8acdf08812",
"title": "Create a Bootstrap Button",
"description": [
"Bootstrap has its own styles for button elements, which look much better than the plain HTML ones.",
"Create a new button element below your large kitten photo. Give it the class btn and the text of \"Like\"."
],
"challengeSeed": [
"",
"",
"",
"
"
],
"tests": [
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'message: Create a new button element with the text \"Like\".');",
"assert($(\"button\").hasClass(\"btn\"), 'message: Your new button should have the class btn.');",
"assert(code.match(/<\\/button>/g) && code.match(/ elements have a closing tag.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"es": {
"title": "Crea un botón con Bootstrap",
"description": [
"Bootstrap tiene sus propios estilos para elementos button, los cuales se ven mejor que los estilos simples de HTML.",
"Crea un nuevo elemento button debajo de tu foto grande del gatito. Dale la clase btn y el texto \"Like\"."
]
},
"fr": {
"title": "Créer un bouton avec Bootstrap",
"description": [
"Bootstrap possède ses propres styles pour les éléments button, qui sont beaucoup plus beaux que ceux issus du HTML seul.",
"Créez un nouvel élément button en dessous de votre grande photo de chaton. Donnez lui comme classe btn et comme texte \"Like\"."
]
}
}
},
{
"id": "bad87fee1348cd8acef08812",
"title": "Create a Block Element Bootstrap Button",
"description": [
"Normally, your button elements with a class of btn are only as wide as the text that they contain. For example:",
"<button class=\"btn\">Submit</button>",
"This button would only be as wide as the word \"Submit\".",
"",
"By making them block elements with the additional class of btn-block, 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.",
"<button class=\"btn btn-block\">Submit</button>",
"This button would take up 100% of the available width.",
"",
"Note that these buttons still need the btn class.",
"Add Bootstrap's btn-block class to your Bootstrap button."
],
"challengeSeed": [
"",
"",
"",
"
"
],
"tests": [
"assert($(\"button\").hasClass(\"btn\"), 'message: Your button should still have the class btn.');",
"assert($(\"button\").hasClass(\"btn-block\"), 'message: Your button should have the class btn-block.');",
"assert(code.match(/<\\/button>/g) && code.match(/
![\"A](\"https://bit.ly/fcc-relaxing-cat\")
",
"",
" ![\"Three](\"https://bit.ly/fcc-running-cats\")
",
"