Skip to content

Commit f828269

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request #49 from UmiKami/02-Bootstrap-Skeleton
modify instructions, added solution, and required bg color for clarity
2 parents b2af1fe + 494e0bb commit f828269

File tree

4 files changed

+41
-8
lines changed

4 files changed

+41
-8
lines changed

‎exercises/02-Bootstrap-Skeleton/README.es.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,18 @@ Al usar Bootstrap, debes incluir todo su contenido dentro de las siguientes clas
2424

2525
1. Vincula el hoja de estilos CSS de Bootstrap con el documento usando la etiqueta `link` que encuentras arriba.
2626

27-
2. Introduce el contenido del sitio web dentro de un `div` con una clase `container`.
27+
2. Introduce el contenido del sitio web dentro de un `div` con clases de `container` y `bg-secondary`.
2828

2929
3. **Compila** y luego **Vista previa** del ejercicio y compara las diferencias.
3030

31-
4. Ahora cambia la clase del `div` que acabas de crear a `container-fluid`.
31+
4. Ahora cambia la clase del `div` que acabas de crear con las clases de `container-fluid` y `bg-secondary`.
3232

3333
5. **Compila** y luego **Vista previa** del ejercicio y compara las diferencias.
3434

3535

3636
## :mag_right: Importante:
3737

38-
Para comprender la diferencia entre ambas clases `container`, debes hacer que el `div` del `container` (el azul, en la parte inferior izquierda de la pantalla) sea más grande.
39-
40-
La clase `container` tiene margin-left auto y margin-right auto para centrar el contenido; mientras que en la clase `container-fluid` el contenido abarca todo el ancho de la página.
38+
Para entender la diferencia entre ambas clases de `container`, debes hacer el contenedor `div` más pequeño y más grande. Hay `margin-left: auto` y `margin-right: auto` para centrar el contenedor; mientras que el contenido en la clase `container-fluid` se extiende a lo largo de todo el ancho de la página.
4139

4240

4341

‎exercises/02-Bootstrap-Skeleton/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ OR
2323

2424
1. Link the Bootstrap CSS Stylesheet with the document using the **link** tag you find above.
2525

26-
2. Wrap the content of the website within a `div` with a **container** class.
26+
2. Wrap the content of the website within a `div` with a `container` and `bg-secondary` classes.
2727

2828
3. **Build** and then **Preview** the exercise and compare the differences.
2929

30-
4. Now change the class of the div you've just created to **container-fluid**.
30+
4. Now change the class of the div you've just created to `container-fluid` and `bg-secondary` classes.
3131

3232
5. **Build** and then **Preview** again and compare the differences.
3333

‎exercises/02-Bootstrap-Skeleton/solution.hide.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<!-- Your Bootstrap Link should be always before the CSS link -->
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
11+
crossorigin="anonymous"
12+
/>
13+
14+
<title>02 Bootstrap Skeleton</title>
15+
</head>
16+
<body>
17+
<div class="container-fluid bg-secondary">
18+
<h1>This is my first example using bootstrap</h1>
19+
<p>I can't believe that bootstap is so easy, now HTML and CSS are a simple but very useful technology.</p>
20+
</div>
21+
22+
<!---Bootstrap JS file DON'T REMOVE THIS FILES-->
23+
<script
24+
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
25+
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
26+
crossorigin="anonymous"
27+
></script>
28+
<script
29+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
30+
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
31+
crossorigin="anonymous"
32+
></script>
33+
</body>
34+
</html>

‎exercises/02-Bootstrap-Skeleton/tests.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,11 @@ describe('1. All the rules in the instructions should be applied', function () {
4242
expect(head.toString().indexOf(`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">`)>-1).toBeTruthy();
4343
});
4444

45-
it('The body should contain a div tag with the class container-fluid', function () {
45+
it('The body should contain a div tag with the class container-fluid and bg-secondary', function () {
4646
let div = document.querySelector("div")
4747
expect(div).toBeTruthy();
4848
expect(div.classList.contains("container-fluid")).toBeTruthy();
49+
expect(div.classList.contains("bg-secondary")).toBeTruthy();
4950
});
5051

5152
it('The div tag should wrap the existing h1 and p tags', function () {

0 commit comments

Comments
 (0)