Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Building the Schedule with a List Group

6:26 with Guil Hernandez

List groups are flexible UI components for displaying both simple and complex lists of elements. You can convert a simple HTML list into something more visually interesting.

Teacher's Notes
Video Transcript
Downloads

Topics snippet

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action"><strong>MongoDB</strong>: NoSQL database</a>
  <a href="#" class="list-group-item list-group-item-action"><strong>Express</strong>: Framework for Node</a>
  <a href="#" class="list-group-item list-group-item-action"><strong>React</strong>: JavaScript library</a>
  <a href="#" class="list-group-item list-group-item-action"><strong>Node.js</strong>: JavaScript environment</a>
  <a href="#" class="list-group-item list-group-item-action"><strong>ES2015</strong>: Latest version of JavaScript</a>
  <a href="#" class="list-group-item list-group-item-action"><strong>Babel</strong>: JavaScript compiler</a>
</div>

Schedule snippet

<!-- schedule -->
<ul class="list-group">
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Keynote: Internet of Things</h5>
      <span class="badge badge-pill badge-info p-2">9:00am</span>
    </div>
    <p class="mb-1">NodeStradamus</p>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">React Basics</h5>
      <span class="badge badge-pill badge-info p-2">10:00am</span>
    </div>
    <p class="mb-1">Vivianne McVue</p>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Hey, Mongo!</h5>
      <span class="badge badge-pill badge-info p-2">11:00am</span>
    </div>
    <p class="mb-1">Jay Query</p>
  </li>
  <li class="list-group-item list-group-item-success">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Lunch</h5>
      <span class="badge badge-pill badge-info p-2">12:00pm</span>
    </div>
    <p class="mb-1">Free pizza for everyone!</p>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Introducing ES2015</h5>
      <span class="badge badge-pill badge-info p-2">1:00pm</span>
    </div>
    <p class="mb-1">Ecma Scriptnstuff</p>
  </li> 
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">Getting Started With Redux</h5>
      <span class="badge badge-pill badge-info p-2">2:00pm</span>
    </div>
    <p class="mb-1">Robbie Redux</p>
  </li> 
  <li class="list-group-item">
    <div class="d-flex justify-content-between">
      <h5 class="mb-1">What's Babel?</h5>
      <span class="badge badge-pill badge-info p-2">3:00pm</span>
    </div>
    <p class="mb-1">Json Babel</p>
  </li>        
</ul><!-- /schedule -->

Resources

List groups are a flexible UI component for displaying both simple and 0:00

complex lists of elements. 0:04

You can convert a simple HTML list into 0:06

something more visually interesting like this. 0:09

For instance, the unordered list of JavaScript topics looks a little plain and 0:12

uninteresting. 0:16

So check out how visually appealing it looks when converted to a linked 0:17

list group. 0:22

The list items are even clickable with hover styles too. 0:25

You can grab this exact snippet from the teacher's notes of this video. 0:29

So we're going to create a customized list group component 0:33

to build a conference schedule. 0:36

One of the best parts about using Bootstrap is that you can mix and 0:38

match classes to create components that match your design needs. 0:41

So scroll down to the schedule content, and 0:45

right below the schedule heading, 0:49

I'll replace this placeholder text with a ul. 0:53

I'll give it the class list-group. 1:00

Then inside it, add a list item with 1:05

the class list-group-item. 1:11

So the mock up shows that each time slot should display the name of the talk 1:19

in bold letters, the speaker's name below it, and the time on the right. 1:25

So we're going to wrap each schedule item inside a flex container. 1:31

This will make it easier to align the content. 1:35

So, inside the list group item, let's add a div 1:38

with the flex box utility class d-flex. 1:44

This will enable flex behaviors, and we'll add the class 1:49

justify-content-between to change the alignment of flex items. 1:54

So this will evenly distribute the content on one line. 1:59

The first element will be aligned to the left side of the div and 2:04

the last element to the right. 2:08

The first talk of the day will be the keynote. 2:11

So let's start with the name of the talk in bold letters. 2:13

Inside the div, I'll add an h5, and I'm going to apply 2:17

a 0.25 rim bottom margin with the class mb-1. 2:23

And let's add the text, so we'll say Keynote: Internet of Things. 2:28

Next, we'll add the talk time. 2:37

I know from reading the docs that you can add 2:40

badges inside the list group component. 2:43

In Bootstrap, badges are small labelling components for 2:46

adding context to your content. 2:50

I think badges are well suited for displaying the talk times, so 2:52

we'll use them in our schedule list group, specifically the pill-shaped badges. 2:55

So I'll copy this badge-pill snippet with the class 3:01

badge-info and paste it below the h5. 3:06

Now let's write the talk time, which is 9 AM. 3:13

And I'll apply 0.5 rims of padding to all four sides of 3:21

the badge with the spacing utility class p-2. 3:26

Remember, if you don't specify a side in the class name, 3:30

it applies the spacing to all sides. 3:33

All right, so in the browser, notice how the talk name is aligned to the left, 3:40

and the time is aligned to the right. 3:45

Now, to place the speaker name below the talk name, 3:48

I'll add a paragraph outside of the div 3:52

with the text NodeStradamus, the name of the keynote speaker. 3:57

And I'll reduce the default bottom margin of 4:02

the paragraph to just 0.25 rem with the class mb-1. 4:06

Now that the first talk's complete, adding the rest should be simple, so 4:17

let's add a few more. 4:20

Back in my list-group, I'll copy the list-group 4:22

item we've just created, paste a new item below. 4:27

And this talk is React Basics, At 10 AM. 4:33

And the speaker is Vivianne McVue. 4:44

I'll go back and add another one. 4:56

So I'll paste a new list item below. 4:59

The name of this talk is Hey, Mongo at 11 AM, 5:03

and the speaker is Jay Query. 5:11

Now every conference needs a lunch break, right? 5:17

Great conferences even offer free pizza. 5:20

So we'll add another list group item for lunch. 5:23

We'll write Lunch at 12 PM. 5:30

And inside the paragraph, I'll type, Free pizza for everyone!. 5:36

And to make the lunch break list-group item stand out, I can apply one of 5:49

these contextual classes to style the list-group item differently. 5:54

I'll give it a light green background with the class list-group-item-success. 6:00

I'll stop here, but you don't have to, so 6:14

feel free to add as many list-group items as you like. 6:17

You can also copy the rest of the conference schedule content from 6:21

the teacher's notes of this video. 6:24

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

Sign up