You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _sessions/c1s3/3_bootstrap_layout.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -40,8 +40,8 @@ Bootstrap works on a grid layout, with 12 columns (by default). You can create a
40
40
41
41
The number after the `col-sm-` determines how many of the 12 grid columns that page column takes up. The `sm` bit determines the width at which the columns will collapse on top of each other (which is useful when viewing your site on a phone). For more information see the [Grid system docs](http://getbootstrap.com/css/#grid).
42
42
43
-
{% exercise %}
44
-
1. Add a `div class='container'` around the page content.
45
-
2. Create a row at the top of the page, with two columns, with the left twice as wide as the right. Put the `h1` in the left column and the `img src='images/sandwich.png'` on the right.
46
-
3. Create a row with three equal colums to hold each of 'The Buzz' `div`s.
47
-
{% endexercise %}
43
+
{% exercise %}
44
+
1. Add a `div class='container'` around the page content.
45
+
2. Create a row at the top of the page, with two columns, with the left twice as wide as the right. Put the `h1` in the left column and the `img src='images/sandwich.png'` on the right.
46
+
3. Create a row with three equal colums to hold each of 'The Buzz' `div`s.
Copy file name to clipboardExpand all lines: _sessions/c1s3/4_more_bootstrap.md
+10-15Lines changed: 10 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,8 +6,8 @@ title: More Bootstrap
6
6
7
7
Skim through the [typography section](http://getbootstrap.com/css/#type) of the bootstrap docs.
8
8
9
-
{% exercise %}
10
-
1. Change the quotes in 'The Buzz' to use [blockquotes](http://getbootstrap.com/css/#type-blockquotes). (Don't worry about the vertical grey lines - we'll remove those later.)
9
+
{% exercise %}
10
+
1. Change the quotes in 'The Buzz' to use [blockquotes](http://getbootstrap.com/css/#type-blockquotes). (Don't worry about the vertical grey lines - we'll remove those later.)
11
11
2. Change the paragraphs in 'Our mission' to be [lead body copy](http://getbootstrap.com/css/#type-body-copy).
12
12
{% endexercise %}
13
13
@@ -16,29 +16,24 @@ Skim through the [typography section](http://getbootstrap.com/css/#type) of the
16
16
17
17
Check out the [buttons section](http://getbootstrap.com/css/#buttons) (CSS > Buttons).
18
18
19
-
{% exercise %}
20
-
<olmarkdown="1">
21
-
<limarkdown="1">Change the 'Send' button to a success button:
19
+
{% exercise %}
20
+
1. Change the 'Send' button to a success button:
22
21
{% highlight html %}
23
-
<buttonclass='btn btn-success'>Send</button>
22
+
<buttonclass='btn btn-success'>Send</button>
24
23
{% endhighlight %}
25
-
You might also need `btn-small` in the Recent Activity section.
26
-
</li>
27
-
<limarkdown="1">
24
+
You might also need `btn-small` in the Recent Activity section.
28
25
2. Make the social links at the bottom in to large buttons (we'll colour them later):
29
26
{% highlight html %}
30
-
<buttonclass='btn btn-lg'>Send</button>
27
+
<buttonclass='btn btn-lg'>Send</button>
31
28
{% endhighlight %}
32
-
</li>
33
-
</ol>
34
29
{% endexercise %}
35
30
36
31
### Images
37
32
38
33
Have a look at the [image section](http://getbootstrap.com/css/#images) of the Bootstrap docs (CSS > Images).
39
34
40
-
{% exercise %}
41
-
1. Make the images in 'The Buzz' round, by adding the `img-circle` class.
42
-
2. You can center the image by adding the [helper class](http://getbootstrap.com/css/#helper-classes-center)`center-block`.
35
+
{% exercise %}
36
+
1. Make the images in 'The Buzz' round, by adding the `img-circle` class.
37
+
2. You can center the image by adding the [helper class](http://getbootstrap.com/css/#helper-classes-center)`center-block`.
43
38
2. Change the main sandwich image into a `img-responsive`, as described in the [responsive images section](http://getbootstrap.com/css/#overview-responsive-images). Try resizing your browser and see how it changes size.
Copy file name to clipboardExpand all lines: _sessions/c1s3/5_modifying_bootstrap.md
+5-15Lines changed: 5 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,10 +9,8 @@ title: Modifying Bootstrap
9
9
If you're going to modify Bootstrap **don't touch the Bootstrap files**. Instead create a new css file of your own to overwrite anything you don't want. This means when a new version of Bootstrap comes out you can upgrade by dragging the new version over the top of the old, without losing any modifications.
10
10
11
11
12
-
{% exercise %}
13
-
<olmarkdown="1">
14
-
<limarkdown="1">
15
-
Create a file called `main.css` and write the following CSS:
12
+
{% exercise %}
13
+
1. Create a file called `main.css` and write the following CSS:
16
14
{% highlight css %}
17
15
#social-buttons button {
18
16
color: white;
@@ -21,25 +19,17 @@ Create a file called `main.css` and write the following CSS:
21
19
background-color: #00acee;
22
20
border-color: #009ad5;
23
21
}
24
-
25
22
.btn-facebook {
26
23
background-color: #4868ac;
27
24
border-color: #314776;
28
25
}
29
-
30
26
.btn-pinterest {
31
27
background-color: #b62f26;
32
28
border-color: #b62f26;
33
29
}
34
30
{% endhighlight %}
35
-
</li>
36
-
<limarkdown="1">
37
-
Link this file into the `head` of `index.html`**underneath your link to bootstrap**.
38
-
</li>
39
-
<limarkdown="1">
40
-
What happens? Notice how in the first rule we've selected only those buttons that exist inside an element with `id=social-buttons`.
41
-
</li>
42
-
</ol>
31
+
2. Link this file into the `head` of `index.html`**underneath your link to bootstrap**.
32
+
3. What happens? Notice how in the first rule we've selected only those buttons that exist inside an element with `id=social-buttons`.
43
33
{% endexercise %}
44
34
45
35
### Changing the background
@@ -98,4 +88,4 @@ There are various other changes you will need to make your site look like the ex
98
88
{% exercise %}
99
89
1. Make any other changes necessary to make your site look like [the example](http://code61.github.io/bootstrap_exercise/)
100
90
2. If you get stuck check by looking at the [gh-pages branch](https://github.com/code61/bootstrap_exercise/tree/gh-pages) on the github repo.
0 commit comments