Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Bootstrap 4 introduces a new UI component called Cards. A card is a flexible and stylish container for displaying a wide variety of content, including images, text, list groups, and headings. Cards have all the elements we need to display the speaker lineup.
Grid snippet
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div><!-- /speakers -->
Speaker snippets
<h4 class="card-title">Vivianne McVue</h4>
<p class="card-text">Vivianne is a web developer and teacher who is passionate about building scalable, data-driven web apps, especially ones that address old problems with new tech!</p>
<h4 class="card-title">NodeStradamus</h4>
<p class="card-text">"NodeStra" is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.</p>
<h4 class="card-title">Robbie Redux</h4>
<p class="card-text">Robbie is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing barriers to learning code.</p>
<h4 class="card-title">Ecma Scriptnstuff</h4>
<p class="card-text">Ecma found her passion for programming and teaching over 15 years ago. She is excited to introduce you to all of the wonders of JavaScript.</p>
<h4 class="card-title">Jay Query</h4>
<p class="card-text">Jay is a developer, author of CSS: The Missing Manual, JavaScript & jQuery: The Missing Manual, and web development teacher.</p>
<h4 class="card-title">Json Babel</h4>
<p class="card-text">All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.</p>
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now we're going to build up
the speaker section of the site.
0:00
The mock up shows that the speaker
listings include an image, a name, and
0:03
a short bio.
0:07
Bootstrap 4 introduces a new
UI component called cards.
0:09
A card is a flexible and
stylish container for displaying a wide
0:13
variety of content including images,
text, list groups and headings.
0:17
Cards have all the elements we need
to display the speaker line up.
0:22
So let's get started.
0:25
Card components have plenty of
styling options like alignment,
0:28
grouping, colors,
even image overlays and more.
0:33
So you can mix and match multiple content
types to create the card design and
0:37
layout you need for your site.
0:40
For example,
you can display a group of cards as
0:42
a single attached element
with card groups or
0:45
display them as equal within height
cards with the card deck classes.
0:48
An interesting option is
the Masonry column layout,
0:54
which places cards in optimal positions
based on the available vertical space.
0:57
For my speaker section,
1:02
I'm going to lay out the card
components using the trusty grid.
1:03
So first, back in index.html
right below the speakers heading,
1:07
I'll replace the placeholder content
1:12
by placing a six-column grid
snippet to get the layout started.
1:15
And you can copy this exact snippet
from the teacher's notes of this video.
1:19
In this grid, each column spans the width
of six columns in medium devices and up.
1:23
If the total column count within
a single row is more than 12,
1:31
each group of extra columns
will wrap onto a new line.
1:35
So that means that in medium screens,
speakers display on three separate lines.
1:38
So two speakers per line.
1:44
Now each card should display
a speaker's image, name, and bio.
1:46
So I'm going to use the image caps
design option, which includes an image,
1:52
heading, and paragraph.
1:57
So I'll scroll down and
copy the top card snippet only,
1:58
and paste it inside my first column.
2:03
And I don't need the second paragraph
containing the small text, so
2:13
I'll delete it.
2:18
Now, let's begin adding
the famous speaker line up.
2:21
In the image's source attribute,
I'll add the path to
2:24
the vivianne.png image located in
the image folder of my project.
2:29
So let's set the path to
2:37
image/vivianne.png.
2:41
And set the alt text to Vivianne.
2:46
In the Card title,
I'll write the first speaker's name,
2:52
Vivianne McVue.
2:59
Then I'll type a short bio for Vivianne.
3:03
So I'll replace the paragraph text
with Vivianne is a web developer and
3:06
teacher Who is passionate about
3:12
Building scalable, data-driven web apps,
3:23
Especially ones that Address
old problems with new tech!
3:39
I'll give this a save.
3:50
In the browser,
you can see Vivianne's card container.
3:53
Let's create another one.
3:55
You can simply copy the one
you just created Paste the new
3:57
card inside the second column, then write
the content for the second speaker.
4:04
So I'll set this image's path
to img/nodestradamus.png.
4:12
And I'll set the alt
text to NodeStradamus.
4:20
The speaker name will be NodeStradamus.
4:28
And let's add the bio.
4:32
So I'll replace Vivianne's bio,
4:33
With NodeStra is a software
4:38
engineer And philosopher
4:42
Trying to leave the world
better Than he found it.
4:54
Let's also say that he codes for
non-profits,
5:05
eCommerce, And large-scale web apps.
5:14
All right, let's give this a save,
refresh the browser, and
5:27
the speaker line up is looking good.
5:32
So now to add the rest of the speakers,
5:35
I'll paste their card snippets
into my last four columns.
5:37
So first, I'll paste the card for
5:43
Robbie Redux, Then I'll paste the card for
Ecma Scriptnstuff.
5:45
Next, I'll add the card for
5:54
Jay Query, and finally the card for Json Babel.
5:57
These are the exact same card components
we just wrote just with different images,
6:05
names, and bios.
6:10
You can copy them from
the teacher's notes of this video.
6:12
So the equal width to column layout
looks great in the medium break points.
6:17
But the columns appear too wide in
the large and extra large breakpoints.
6:22
So let’s adjust the layout so that we
see three speakers per line in large and
6:28
extra large screens.
6:32
Remember, you can only fit 12
columns per line by default.
6:34
And we want to display
three columns per line.
6:39
So 12 divided by 3 equals 4.
6:42
So we'll give each column
class the class col-lg-4 so
6:44
that they each span four columns
in the large grid and up.
6:49
So I'll go ahead and
copy this column class and
6:56
paste it in all remaining
column classes for my speakers.
6:59
Give that a save.
7:14
And now in a large screens and up,
7:16
the page displays an equal width,
three column layout, good.
7:18
All right, so
we have one more major section to build.
7:26
The schedule, we'll do that next.
7:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up