In this example we'll create a single column to-do list.

1. Create a container

Start by creating a container for our to-do list. Let's use a box and center it to the grid with an offset. The round class takes care of rounding corners and softening the edges.

container
<div class='box round col-sm-10 col-sm-offset-1'>
  container
</div>

2. Add our to-do items

To-do items need space to breathe and a bottom border to separate them from other items in the list. To accomplish this we'll use padding helpers and a keyline on each item.

Catch all 648 Pokemon
Save the cheerleader
Clone dinosaurs
Destroy 7 horcruxes
Get back to 1985
<div class='box round col-sm-10 col-sm-offset-1'>
  <div class='pad1y pad2x keyline-bottom'>Catch all 648 Pokemon</div>
  <div class='pad1y pad2x keyline-bottom'>Save the cheerleader</div>
  <div class='pad1y pad2x keyline-bottom'>Clone dinosaurs</div>
  <div class='pad1y pad2x keyline-bottom'>Destroy 7 horcruxes</div>
  <div class='pad1y pad2x'>Get back to 1985</div>
</div>

3. Include some icons

We want to easily distinguish which items in our list have been completed. Let's use the check-mark from our list of icons.

Catch all 648 Pokemon
Save the cheerleader
Clone dinosaurs
Destroy 7 horcruxes
Get back to 1985
<div class='box round col-sm-10 col-sm-offset-1'>
  <div class='pad1y pad2x keyline-bottom'>
    <i class='icon icon-ok pad1r success'></i>Catch all 648 Pokemon
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    Save the cheerleader
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    Clone dinosaurs
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    <i class='icon icon-ok pad1r success'></i>Destroy 7 horcruxes
  </div>
  <div class='pad1y pad2x'>
    Get back to 1985
  </div>
</div>

4. Fix spacing

That's better, but items in our list aren't lining up! Let's reserve one column for the icon by using our grid system. We also need to clear floats on each item by using the clearfix helper.

Catch all 648 Pokemon
Save the cheerleader
Clone dinosaurs
Destroy 7 horcruxes
Get back to 1985
<div class='box round col-sm-10 col-sm-offset-1'>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon icon-ok success col-xs-1'></i>
    Catch all 648 Pokemon
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon col-xs-1'></i>
    Save the cheerleader
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon col-xs-1'></i>
    Clone dinosaurs
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon icon-ok success col-xs-1'></i>
    Destroy 7 horcruxes
  </div>
  <div class='pad1y pad2x clearfix'>
    <i class='icon col-xs-1'></i>
    Get back to 1985
  </div>
</div>

5. Adding items to the list

We're almost there! We just need a way to add items to the list. Let's position an input with button above our list so users can quickly add to-do items.

Catch all 648 Pokemon
Save the cheerleader
Clone dinosaurs
Destroy 7 horcruxes
Get back to 1985
<fieldset class='col-sm-10 col-sm-offset-1 space-bottom'>
  <div class='input-group'>
    <input type='text' placeholder='What else would you like to do?'>
    <div class='input-group-btn'>
      <a href='#fakelink' class='btn btn-primary'><i class='icon icon-plus icon-sm pad0r'></i>Add item</a>
    </div>
  </div>
</fieldset>
<div class='box round col-sm-10 col-sm-offset-1'>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon icon-ok success col-xs-1'></i>
    Catch all 648 Pokemon
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon col-xs-1'></i>
    Save the cheerleader
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon col-xs-1'></i>
    Clone dinosaurs
  </div>
  <div class='pad1y pad2x keyline-bottom clearfix'>
    <i class='icon icon-ok success col-xs-1'></i>
    Destroy 7 horcruxes
  </div>
  <div class='pad1y pad2x clearfix'>
    <i class='icon col-xs-1'></i>
    Get back to 1985
  </div>
</div>
Made with in Norcross by the UX Team.