"Alt Snip"
Bootstrap 3.3.0 Snippet by rameyrobo

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Page header --> <div class="page-header"> <h2>Timeline <small>using Bootstrap's <code>.panel</code>.</small></h2> </div> <!-- /Page header --> <!-- Timeline --> <div class="timeline"> <!-- Line component --> <div class="line text-muted"></div> <!-- Separator --> <div class="separator text-muted"> <time class="productDate">11-4-2015</time> </div> <!-- /Separator --> <!-- Panel --> <article class="panel panel-primary product-panel"> <!-- Icon --> <div class="panel-heading icon"> <a class="newProductsLinkIcon" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><i class="glyphicon glyphicon-plus"></i></a> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading clickable newProducts"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h2 class="panel-title new-products-title"> New Products</h2> </a> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <div id="collapseOne" class="panel-collapse collapse in"> <ul class=newProductsList> <li><a href="http://jagprecision.com/shs-m4-fire-selector-type-1-black">SHS M4 FS 1 BK</a></li> <li><a href="http://jagprecision.com/shs-m4-straight-trigger-type-1-black">SHS M4 TG 1 BK</a></li> <li><a href="http://jagprecision.com/shs-stop-gearbox-defect-sgd-style-3">SHS SGD 3</a></li> <li><a href="http://jagprecision.com/pps-refillable-co2-green-gas-12gram-cartridge">PPS CART 12G</a></li> <li><a href="http://jagprecision.com/shs-silica-gel-aeg-hop-up-bucking-60-degree">SHS HB 60 RED</a></li> <li><a href="http://jagprecision.com/shs-silica-gel-aeg-hop-up-bucking-60-degree-35744">SHS HB 60 RIB</a></li> <li><a href="http://jagprecision.com/shs-silica-gel-aeg-hop-up-bucking-60-degree-35745">SHS HB 70 BLU</a></li> <li><a href="http://jagprecision.com/shs-silica-gel-aeg-hop-up-bucking-60-degree-35746">SHS HB 70 RIB</a></li> </ul> </div> <!-- /Body --> </article> <!-- /Panel --> <article class="panel panel-primary product-panel"> <!-- Icon --> <div class="panel-heading icon"> <a class="newProductsLinkIcon" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><i class="glyphicon glyphicon-plus"></i></a> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading clickable restockedProducts"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><h2 class="panel-title new-products-title"> Restocked Products</h2> </a> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <div id="collapseTwo" class="panel-collapse collapse in"> <ul class=newProductsList> <li><a href="http://jagprecision.com/shs-aluminum-air-seal-nozzle-for-ak">SHS ASN AK (TZ0064)</a></li> <li><a href="http://jagprecision.com/shs-aluminum-air-seal-nozzle-for-m14">SHS ASN M14 (TZ0061)</a></li> <li><a href="http://jagprecision.com/shs-aluminum-air-seal-nozzle-for-m16-m4">SHS ASN M16 (TZ0034)</a></li> <li><a href="http://jagprecision.com/shs-8mm-steel-ball-bearing-set">SHS BEARING 8MM</a></li> <li><a href="http://jagprecision.com/shs-padded-flat-aluminum-cylinder-head-for-version-2-3">SHS CH PF V2/3 (GT0028)</a></li> <li><a href="http://jagprecision.com/shs-stainless-steel-m4-cylinder-type-1">SHS CYL M4 (QG0011)</a></li> <li><a href="http://jagprecision.com/shs-upgrade-piano-wire-spring-m140">SHS M140</a></li> <li><a href="http://jagprecision.com/shs-upgrade-piano-wire-spring-m90">SHS M90</a></li> <li><a href="http://jagprecision.com/shs-standard-motor-long-type">SHS MTR STD L</a></li> <li><a href="http://jagprecision.com/shs-high-torque-motor-long-type">SHS MTR TQ L</a></li> <li><a href="http://jagprecision.com/shs-high-torque-motor-short-type">SHS MTR TQ S</a></li> <li><a href="http://jagprecision.com/shs-lighten-fiber-reinforced-polymer-piston-body-with-14-steel-teeth">SHS PB LFR 14 (TT0031)</a></li> <li><a href="http://jagprecision.com/shs-fiber-reinforced-polymer-piston-body-with-7-steel-teeth">SHS PB LFR 7 (TT0044)</a></li> <li><a href="http://jagprecision.com/shs-light-weight-piston-body-with-15-metal-teeth">SHS PB LW 15 (TT0093)</a></li> <li><a href="http://jagprecision.com/shs-steel-sector-gear-clip-delayer">SHS SGC (PM0044)</a></li> <li><a href="http://jagprecision.com/shs-aeg-spring-kit-for-version-3">SHS SPRING KIT V3 (TH0038)</a></li> <li><a href="http://jagprecision.com/shs-swtich-for-version-3-no-wires">SHS SWITCH V3 (NB0026)</a></li> <li><a href="http://jagprecision.com/shs-t-connector-pair">SHS T-CON (NB0009)</a></li> <li><a href="http://jagprecision.com/shs-nylon-tappet-plate-for-version-2">SHS TP V2 (NB0001)</a></li> <li><a href="http://jagprecision.com/super-shooter-ball-bearing-spring-guide-for-version-2">SS SG V2 (WD0008)</a></li> </ul> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Separator --> <div class="separator text-muted"> <time class="productDate">10-27-2015</time> </div> <!-- /Separator --> <!-- Panel --> <article class="panel panel-primary product-panel"> <!-- Icon --> <div class="panel-heading icon"> <a class="newProductsLinkIcon" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><i class="glyphicon glyphicon-plus"></i></a> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading clickable restockedProducts"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><h2 class="panel-title new-products-title"> Restocked Products</h2> </a> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <div id="collapseThree" class="panel-collapse collapse"> <ul class=newProductsList> <li><a href="http://jagprecision.com/bravo-airsoft-p15-flashlight-and-green-laser-combo-with-pressure-pad-in-black">BRAVO P15 GRN BLK</a></li> <li><a href="http://jagprecision.com/bravo-airsoft-p15-flashlight-and-green-laser-combo-with-pressure-pad-in-fde">BRAVO P15 GRN FDE</a></li> </ul> </div> <!-- /Body --> </article> <!-- /Panel --> <!-- Line component --> <div class="line text-muted"></div> <!-- Separator --> <div class="separator text-muted"> <time class="productDate">10-23-2015</time> </div> <!-- /Separator --> <!-- Panel --> <article class="panel panel-primary product-panel"> <!-- Icon --> <div class="panel-heading icon"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><i class="glyphicon glyphicon-plus"></i></a> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading clickable newProducts"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><h2 class="panel-title new-products-title"> New Products</h2> </a> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <div id="collapseFour" class="panel-collapse collapse"> <ul class=newProductsList> <li><a href="http://jagprecision.com/bol-nimh-nicd-smart-battery-charger-6-8cells">BOL CHR MINI</a></li> <li><a href="http://jagprecision.com/bol-porte-lipo-liion-battery-balance-charger">BOL CHR PORTE</a></li> <li><a href="http://jagprecision.com/bol-porte-lipo-liion-battery-balance-charger-35772">BOL CHR BASIC</a></li> <li><a href="http://jagprecision.com/bol-porte-lipo-liion-battery-balance-charger-35771">BOL CHR MATRIX</a></li> <li><a href="http://jagprecision.com/bol-porte-lipo-liion-battery-balance-charger-35773">BOL BAT 96 1600</a></li> </ul> </div> <!-- /Body --> </article> <!-- /Panel --> <article class="panel panel-primary product-panel"> <!-- Icon --> <div class="panel-heading icon"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><i class="glyphicon glyphicon-plus"></i></a> </div> <!-- /Icon --> <!-- Heading --> <div class="panel-heading clickable restockedProducts"> <a class="newProductsLink" data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><h2 class="panel-title new-products-title"> Restocked Products</h2> </a> </div> <!-- /Heading --> <!-- Body --> <div class="panel-body"> <div id="collapseFive" class="panel-collapse collapse"> <ul class=newProductsList> <li><a href="http://jagprecision.com/modify-tech-300rd-polymer-jet-magazine-tracer-mag-with-led-for-m4-m16-series">MAG-MOD JMAG LED BLK</a></li> <li><a href="http://jagprecision.com/modify-tech-xtc-190rnd-mid-cap-aeg-magazine-for-m4-m16-series-in-black">MAG-MOD XTC 190 BLK</a></li> <li><a href="http://jagprecision.com/modify-tech-xtc-190rnd-mid-cap-aeg-magazine-for-m4-m16-series-5-pcs-set-black">MAG-MOD XTC 190 BOX BLK</a></li> <li><a href="http://jagprecision.com/modify-tech-xtc-190rnd-mid-cap-aeg-magazine-for-m4-m16-series-5-pcs-set-tan">MAG-MOD XTC 190 BOX TAN</a></li> <li><a href="http://jagprecision.com/modify-tech-xtc-190rnd-mid-cap-aeg-magazine-for-m4-m16-series-in-tan">MAG-MOD XTC 190 TAN</a></li> <li><a href="http://jagprecision.com/modify-tech-mod24-sniper-rifle-in-black">MOD SNIPER MOD24 BLK</a></li> <li><a href="http://jagprecision.com/modify-tech-mod24-sniper-rifle-in-od">MOD SNIPER MOD24 OD</a></li> <li><a href="http://jagprecision.com/modify-tech-mod24-sniper-rifle-in-tan">MOD SNIPER MOD24 TAN</a></li> <li><a href="http://jagprecision.com/stark-equipment-express-grip-in-black">SE EG5 BLK</a></li> <li><a href="http://jagprecision.com/stark-equipment-express-grip-in-od-green">SE EG5 OD</a></li> <li><a href="http://jagprecision.com/stark-equipment-express-grip-in-tan-earth">SE EG5 TAN</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers">HEX MAG ID BLK</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36119">HEX MAG ID BLUE</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36120">HEX MAG ID DE</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36121">HEX MAG ID OR</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36122">HEX MAG ID PINK</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36123">HEX MAG ID RED</a></li> <li><a href="http://jagprecision.com/hexmag-airsoft-hexid-hexmag-black-out-4x-hexgon-latchplates-4x-followers-36124">HEX MAG ID YEL</a></li> </ul> </div> </div> <!-- /Body --> </article> <!-- /Panel --> </div> <!-- /Timeline --> </div>
.timeline { position: relative; padding: 21px 0px 10px; margin-top: 4px; margin-bottom: 30px; } .timeline .line { position: absolute; width: 4px; display: block; background: #FFF; top: 0px; bottom: 0px; margin-left: 30px; opacity:0 } .timeline .separator { padding: 5px; padding-left: 40px; font-style: italic; font-size: .9em; margin-left: 30px; } .timeline .line::before { top: -4px; } .timeline .line::after { bottom: -4px; } .timeline .line::before, .timeline .line::after { content: ''; position: absolute; left: -4px; width: 12px; height: 12px; display: block; border-radius: 50%; background: currentColor; } .timeline .panel { position: relative; margin: 10px 0px 21px 70px; clear: both; } .timeline .panel::before { position: absolute; display: block; top: 8px; left: -24px; content: ''; width: 0px; height: 0px; border: inherit; border-width: 12px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; } .timeline .panel .panel-heading.icon { position: absolute; left: -59px; display: block; width: 40px; height: 40px; padding: 0px; border-radius: 50%; text-align: center; float: left; z-index:300; } .timeline .panel-outline { border-color: transparent; background: transparent; box-shadow: none; } .timeline .panel-outline .panel-body { padding: 10px 0px; } .timeline .panel-outline .panel-heading:not(.icon), .timeline .panel-outline .panel-footer { display: none; } .panel-primary>.panel-heading { color: #fff; background-color: #FFF; border-color: #FFF; } .panel-primary>.panel-heading.newProducts { color: #fff; background-color: #D9D9D9; border-color: #D9D9D9; } .panel-primary>.panel-heading.restockedProducts { color: #fff; background-color: #D9D9D9; border-color: #D9D9D9; } a.newProductsLink { color: #000000; } article.panel.panel-primary.product-panel { border-color: #FFF; } h2.panel-title.new-products-title { text-transform: uppercase; } ul.newProductsList { list-style-type: none; margin-left: -35px; } ul.newProductsList li { margin-top: 8px; line-height: normal; } ul.newProductsList li a { color: #000; } time.productDate { font-style: normal; font-size: 20px; font-weight: bolder; color: #000; } .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 29px; margin-left: 1px; color: #D9D9D9; }

Related: See More

Argon Design System

Questions / Comments: