Useful Bootstrap 4 code snippets.
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.
$('[data-section]').on('click', function (e) {
e.preventDefault();
section = $(this).data('section');
$('.section, [data-section]').removeClass('open active');
$('#'+section).addClass('open');
$(this).addClass('active');
});
.section {
display: none;
}
.section.open {
display: block;
}
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.
.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%;
}
}