Timelines

Place timeline-increment-icon and timeline-increment-label inside whatever element you want it to be aligned to. The element must be positioned relative. For the example below, we place it inside the panel-heading element. This vertically centers the icon and label relative to the panel-heading.

The icon can be any size as long as it is wrapped inside timeline-increment-icon. For larger icons, the spacing between the content and label (Timeline Spacing) must be adjusted to accomodate it.

• Single Collapsible Panel

  In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
• Single Collapsible Panel

  In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
• Single Collapsible Panel

  In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
• The icon can be any size as long as it is wrapped inside timeline-increment-icon. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.

Timeline Right

Align increments to the right with timeline-right.

• Panel Text #1

  
• Panel Text #2

  LR
• Panel Text #3

  AL

Timeline Center

Add class timeline-center to center your timeline, it displays items on the right by default. To display items on the left, add class timeline-item-reverse to a timeline item.

• Single Collapsible Panel

  LR

  1 hour ago

  In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
• Panel Text #2

  LR

  1 hour ago
• Panel Text #3

  LR

  1 hour ago

Timeline Even

Alternate every other timeline item on the left with class timeline-even.

• Panel Text #1

  LR

  1 hour ago
• Panel Text #2

  LR

  1 hour ago
• Panel Text #3

  LR

  1 hour ago

Timeline Odd

Alternate every other timeline item on the right with class timeline-odd.

• Panel Text #1

  LR

  1 hour ago
• Panel Text #2

  LR

  1 hour ago
• Panel Text #3

  LR

  1 hour ago

Timeline Right XS Only

Align timeline to the right at screen widths 767px and below with timeline-right-xs-only.

• Panel Text #1

  LR

  1 hour ago
• Panel Text #2

  LR

  2 hours ago
• Panel Text #3

  LR

  3 hours ago

Timeline Spacing

Adjust the spacing around the timeline with @include timeline-spacing($outer-spacing, $inner-spacing, $item-vertical-padding). The last argument is not required and has a default value of 10px.

.timeline-spacing-xl {
    @include timeline-spacing(25px, 50px);
}

• Single Collapsible Panel

  LR

  1 hour ago

  In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
• Panel Text #2

  LR

  1 hour ago
• Panel Text #3

  LR

  1 hour ago