On my webpage, I've integrated Bootstrap 4 and fullpage.js. However, when I apply the bootstrap col to sections, they stack vertically instead of appearing side by side.
This is the HTML code:
<div class="container-fluid position-relative">
<div id="fullpage">
<div class="row section homeClass" id="home">HomePage</div>
<div class="row section productsClass" id="products">
<div class="col-12 col-sm-6 col-md-8 left">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4 right">.col-6 .col-md-4</div>
</div>
<div class="row section contactClass" id="contact">Contact</div>
<div class="row" id="footer">Footer</div>
</div>
Below is my initialization for fullpage.js:
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke']
, afterLoad: function (anchorLink, index) {
var loadedSection = $(this);
if (index == 1) {
//Code for Home section
}
if (index == 2) {
//Code for Products section
}
if (index == 3) {
//Code for Contact section
}
}
});
https://i.sstatic.net/N3phy.png
Note: The black and red div represents my navbar with a higher z-index compared to other elements on the page.