Skip to main content
Toggle navigation Bootstrap vertical

Pine.JS example: Bootstrap vertical

In this test-case:

  • Vertical navigation build inside Bootstrap layout
  • Bootstrap skin
  • Custom small/large screen breakpoint
  • More complex navigation structure
  • Implemented via LESS

Pine initialized this way:

$(function() {
    $('.pine').pine({
      fxSmallDisplay: 'fx-collapse',
      largeDisplayStart: '992px'
    });
  });

Follow comments in css/bootstrap-vertical.less and this HTML file.

Pine.JS documentation

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, necessitatibus pariatur dolore laborum ab quo et deserunt sequi atque modi. Debitis, nemo, ipsa animi rem accusamus ea beatae excepturi minima!

Duis sit amet sapien mi. Pellentesque velit turpis, consectetur sit amet vehicula vehicula, pellentesque nec sapien. Mauris ipsum nibh, lobortis vitae fermentum nec, lobortis sed arcu. Cras a porttitor elit. Sed purus dui, accumsan eget odio sit amet, imperdiet faucibus erat. Nam non nibh commodo, consequat nunc sed, tempus tortor.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel tortor eget lacus aliquam tincidunt vel non mauris.

Consectetur adipisicing elit

Duis sit amet sapien mi. Pellentesque velit turpis, consectetur sit amet vehicula vehicula, pellentesque nec sapien. Mauris ipsum nibh, lobortis vitae fermentum nec, lobortis sed arcu. Cras a porttitor elit. Sed purus dui, accumsan eget odio sit amet, imperdiet faucibus erat. Nam non nibh commodo, consequat nunc sed, tempus tortor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, dolor, deserunt, aspernatur recusandae rem inventore eum non porro temporibus itaque ipsa quasi expedita eius nulla iure quia excepturi placeat eos!

Cras a porttitor elit. Sed purus dui, accumsan eget odio sit amet, imperdiet faucibus erat. Nam non nibh commodo, consequat nunc sed, tempus tortor.