Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Displaying Content with Cards

7:32 with Guil Hernandez

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 &amp; 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

  • 0:00

    Now we're going to build up the speaker section of the site.

  • 0:03

    The mock up shows that the speaker listings include an image, a name, and

  • 0:07

    a short bio.

  • 0:09

    Bootstrap 4 introduces a new UI component called cards.

  • 0:13

    A card is a flexible and stylish container for displaying a wide

  • 0:17

    variety of content including images, text, list groups and headings.

  • 0:22

    Cards have all the elements we need to display the speaker line up.

  • 0:25

    So let's get started.

  • 0:28

    Card components have plenty of styling options like alignment,

  • 0:33

    grouping, colors, even image overlays and more.

  • 0:37

    So you can mix and match multiple content types to create the card design and

  • 0:40

    layout you need for your site.

  • 0:42

    For example, you can display a group of cards as

  • 0:45

    a single attached element with card groups or

  • 0:48

    display them as equal within height cards with the card deck classes.

  • 0:54

    An interesting option is the Masonry column layout,

  • 0:57

    which places cards in optimal positions based on the available vertical space.

  • 1:02

    For my speaker section,

  • 1:03

    I'm going to lay out the card components using the trusty grid.

  • 1:07

    So first, back in index.html right below the speakers heading,

  • 1:12

    I'll replace the placeholder content

  • 1:15

    by placing a six-column grid snippet to get the layout started.

  • 1:19

    And you can copy this exact snippet from the teacher's notes of this video.

  • 1:23

    In this grid, each column spans the width of six columns in medium devices and up.

  • 1:31

    If the total column count within a single row is more than 12,

  • 1:35

    each group of extra columns will wrap onto a new line.

  • 1:38

    So that means that in medium screens, speakers display on three separate lines.

  • 1:44

    So two speakers per line.

  • 1:46

    Now each card should display a speaker's image, name, and bio.

  • 1:52

    So I'm going to use the image caps design option, which includes an image,

  • 1:57

    heading, and paragraph.

  • 1:58

    So I'll scroll down and copy the top card snippet only,

  • 2:03

    and paste it inside my first column.

  • 2:13

    And I don't need the second paragraph containing the small text, so

  • 2:18

    I'll delete it.

  • 2:21

    Now, let's begin adding the famous speaker line up.

  • 2:24

    In the image's source attribute, I'll add the path to

  • 2:29

    the vivianne.png image located in the image folder of my project.

  • 2:37

    So let's set the path to

  • 2:41

    image/vivianne.png.

  • 2:46

    And set the alt text to Vivianne.

  • 2:52

    In the Card title, I'll write the first speaker's name,

  • 2:59

    Vivianne McVue.

  • 3:03

    Then I'll type a short bio for Vivianne.

  • 3:06

    So I'll replace the paragraph text with Vivianne is a web developer and

  • 3:12

    teacher Who is passionate about

  • 3:23

    Building scalable, data-driven web apps,

  • 3:39

    Especially ones that Address old problems with new tech!

  • 3:50

    I'll give this a save.

  • 3:53

    In the browser, you can see Vivianne's card container.

  • 3:55

    Let's create another one.

  • 3:57

    You can simply copy the one you just created Paste the new

  • 4:04

    card inside the second column, then write the content for the second speaker.

  • 4:12

    So I'll set this image's path to img/nodestradamus.png.

  • 4:20

    And I'll set the alt text to NodeStradamus.

  • 4:28

    The speaker name will be NodeStradamus.

  • 4:32

    And let's add the bio.

  • 4:33

    So I'll replace Vivianne's bio,

  • 4:38

    With NodeStra is a software

  • 4:42

    engineer And philosopher

  • 4:54

    Trying to leave the world better Than he found it.

  • 5:05

    Let's also say that he codes for non-profits,

  • 5:14

    eCommerce, And large-scale web apps.

  • 5:27

    All right, let's give this a save, refresh the browser, and

  • 5:32

    the speaker line up is looking good.

  • 5:35

    So now to add the rest of the speakers,

  • 5:37

    I'll paste their card snippets into my last four columns.

  • 5:43

    So first, I'll paste the card for

  • 5:45

    Robbie Redux, Then I'll paste the card for Ecma Scriptnstuff.

  • 5:54

    Next, I'll add the card for

  • 5:57

    jQuery, And finally, the card for Json Babble.

  • 6:05

    These are the exact same card components we just wrote just with different images,

  • 6:10

    names, and bios.

  • 6:12

    You can copy them from the teacher's notes of this video.

  • 6:17

    So the equal width to column layout looks great in the medium break points.

  • 6:22

    But the columns appear too wide in the large and extra large breakpoints.

  • 6:28

    So let’s adjust the layout so that we see three speakers per line in large and

  • 6:32

    extra large screens.

  • 6:34

    Remember, you can only fit 12 columns per line by default.

  • 6:39

    And we want to display three columns per line.

  • 6:42

    So 12 divided by 3 equals 4.

  • 6:44

    So we'll give each column class the class col-lg-4 so

  • 6:49

    that they each span four columns in the large grid and up.

  • 6:56

    So I'll go ahead and copy this column class and

  • 6:59

    paste it in all remaining column classes for my speakers.

  • 7:14

    Give that a save.

  • 7:16

    And now in a large screens and up,

  • 7:18

    the page displays an equal width, three column layout, good.

  • 7:26

    All right, so we have one more major section to build.

  • 7:30

    The schedule, we'll do that next

You need to sign up for Treehouse in order to download course files.

Sign up