Useful Bootstrap 4 code snippets.

Intro

Section control

Toggle html blocks in Bootstrap 4 to simulate pages. This will automatically control active class for the button and open class for the section. .open class should be assigned to the section that needs to be opened by default.

Usage: Add data-section="" to any button containing section ID that you want to control. Add .section class to the div and id.

JS Code


$('[data-section]').on('click', function (e) {

    e.preventDefault();
    section = $(this).data('section');

    $('.section, [data-section]').removeClass('open active');
    $('#'+section).addClass('open');
    $(this).addClass('active');

});

CSS Code

.section {
  display: none;
}

.section.open {
  display: block;
}

Divide a row in 5 columns in Bootstrap 4

Bootstrap 4 CSS snippet that allows you to have 5 columns in a row. 12-5 in class .col-sm-12-5 represent division 12/5 otherwise it's 2.4 but dots are not allowed in CSS classes. Simply paste the code snippet below.

CSS Code

.col-lg-12-5 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
  .col-sm-12-5 {
     -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
  }
}

@media (min-width: 768px) {
  .col-md-12-5 {
     -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
  }
}

@media (min-width: 992px){
  .col-lg-12-5 {
     -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
  }
}

@media (min-width: 1200px){
  .col-xl-12-5 {
     -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
  }
}