Join the Treehouse affiliate program and earn 25% recurring commission!

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

Well done!

You have completed Bootstrap Basics!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

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
Questions?
Video Transcript
Downloads
Workspaces

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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 rem 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 rems 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

You need to sign up for Treehouse in order to set up Workspace

Sign up