Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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
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 jQuery, And finally, the card for Json Babble. 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 up