Hi,
I made a portfolio website on Squarespace a while ago. It’s not live, but it has kept a draft copy which previews as the real thing. I still like how it looks and it was a bit of work, is there a way to import it over to Bootstrap?
Thank you
I tried saving a page from a Squarespace website to a folder, and then importing it into BSS, and it was a big old mess. It might be do-able with a lot of legwork, but the Squarespace builder does a lot of stuff that goes against best practices, and it was immediately apparent when I imported the page into BSS how much stuff would have to be manually fixed.
Unless there’s something incredibly unique about the Squarespace layout that can’t be duplicated with Bootstrap Studio, I think it would be infinitely easier to build a new site in BSS from scratch, assuming you have access to all the original content from your Squarespace website.
I find most programs that try to import web pages built by other builders never do a particularly good job of it.
1 Like
Thank you. Mine was a crazy mess too. I think I can make the website on bootstrap, but I don’t know how to do side scroll images: https://youtu.be/VOUuDlC47j4
The Bootstrap Carousel component does side-scrolling like this (although it doesn’t show multiple small images that scroll one at a time like in your link) For this exact type of slider, you’d have to write some custom code to modify the Bootstrap slider, or just use a third-party slider like Owl Slider or Slick Slider (there are a plenty of free JS sliders out there.)
Also, there’s a bug in the Bootstrap Carousel that prevents it from advancing using touch/swipe on mobile unless you first click on one of the forward/backward arrows. @kuligaposten wrote a little JS fix for it (below), so consider this a mandatory script to add to any website in which you use the Bootstrap Carousel if it will be viewed on a mobile device.
const carouselElements = document.querySelectorAll('[data-bs-ride="false"]');
carouselElements.forEach((element) => {
const carousel = bootstrap.Carousel.getOrCreateInstance(element);
carousel.pause();
});
Thanks for the info 
I think I’ll search a third party slider as you suggest and see how I go.
Regarding the new 5.3.1 Bootstrap and their listed support for Safari 12>or= browser support it may be a better option to use this code as unless the experimental option in Safari 12 is turned on for “pointer events” the Bootstrap 5.3.1 carousel goes all wonky after the first slide. It reverses and wont listen to any prev next or swipes, it will always go backward. The following code requires one to turn off touch contol by setting it to false but it will handle touch events properly and on the first slide move. Kuli script will work on first slide but on Safari 12 start backward after that.
Really is a Bootstrap 5.3.1 browser support issue but here is the code (remember to turn off touch by setting to data-bs-touch false)
document.addEventListener('DOMContentLoaded', function() {
// Find all dynamically created carousels on the page
var dynamicCarousels = document.querySelectorAll('.carousel');
// Iterate over each dynamically created carousel
dynamicCarousels.forEach(function(carousel) {
var startX, startY, distX, distY;
carousel.addEventListener('touchstart', function(e) {
var touchobj = e.changedTouches[0]; // reference first touch point
startX = touchobj.clientX;
startY = touchobj.clientY;
distX = 0;
distY = 0;
});
carousel.addEventListener('touchmove', function(e) {
var touchobj = e.changedTouches[0]; // reference first touch point
distX = touchobj.clientX - startX;
distY = touchobj.clientY - startY;
});
carousel.addEventListener('touchend', function(e) {
if (Math.abs(distX) > Math.abs(distY)) { // horizontal swipe
if (distX > 0) {
// Swipe right
carousel.querySelector('.carousel-control-prev').click();
} else {
// Swipe left
carousel.querySelector('.carousel-control-next').click();
}
}
});
});
});
You can make a touch Controller for your carousels like this
class TouchCarousel {
constructor(elm, opts) {
this.elm = elm;
this.touchCarousel = new bootstrap.Carousel(elm, this.opts);
this.opts = Object.assign({}, TouchCarousel.defaults, opts);
this.touchController();
}
static defaults = {
touch: false,
};
touchController() {
let direction, position, y1, y2;
const onTouchStart = (event) => {
y1 = event.touches[0].clientY;
position = getPositionX(event);
direction = '';
};
const onTouchMove = (event) => {
y2 = event.touches[0].clientY;
if (Math.abs(y1 - y2) < 5) {
event.preventDefault();
}
if (position - getPositionX(event) > 100) {
direction = 'right';
} else if (position - getPositionX(event) < -100) {
direction = 'left';
}
};
const onTouchEnd = () => {
if (direction === 'right') this.touchCarousel.next();
if (direction === 'left') this.touchCarousel.prev();
};
const getPositionX = (event) => event.touches[0].pageX;
this.elm.addEventListener('touchstart', onTouchStart);
this.elm.addEventListener('touchmove', onTouchMove);
this.elm.addEventListener('touchend', onTouchEnd);
}
}
// Usage example:
window.addEventListener(
'DOMContentLoaded',
() => {
const touchCarousels = document.querySelectorAll('.carousel');
const options = {
touch: false,
};
touchCarousels.forEach((carousel) => {
new TouchCarousel(carousel, options);
});
},
false
);
here is an example
I dont know why but my example works on Safari 12 mobile (no experimental setting enabled) and yours kuligaposten does not.
touchswipe5.3.1 Safari 12 support
I know the Bootstrap framework supported Safari 12 carousel in 5.1 but in 5.2 they removed and redesigned things. Spent a little time with Chat GTP4 code interpreter and finally came down to the “pointer events”.
Stating that the Bootstrap framework support Safari 12 in 5.3.1 seems like a little stretch now as “pointer events” on caniuse did not happen till Safari 13.
I really am close to buying a new phone…I swear its this year 
Been quite a few bumps in the road lately with 5.3
The only difference between yours and my code is mine should work with or without the carousel controllers. It works on my old iPad mini from the stone age and on my android phone from current era.
Check if this work on your Iphone
@kuligaposten Could you possibly send me that Flexbox slider as a BSS component? I would l would love to look it over inside BSS.
@martin Is there any way to move this entire post to the Webdesign Help category, and can we change the title to Customizing and Fixing Issues with the Bootstrap Carousel?
Yes of course, why not. You should have an email by now
1 Like
That works if I decrease the swipe distance threshold. Also, its too bad modules dont import from subfolders. 
…
@twinstream
I have no problem to import modules from subfolders
this is my goto setup
├── pages
├── dummy.html => hide in export
└── index.html
├── styles
└── styles.css
└── javascript
└── modules
└── classes.mjs => show only on dummy.html
└── main.mjs
├── fonts
└── images
in main.mjs I import like this
import { TouchController } from './modules/classes.mjs';
window.addEventListener(
'DOMContentLoaded',
() => {
const touchCarousels = document.querySelectorAll('.carousel');
touchCarousels.forEach((carousel) => {
new TouchController(carousel);
});
},
false
);
in the classes.mjs I export like this
export class TouchController {...}
export class OtherClass {...}
export function NameOfTheFunction() {...}
export const DataObject = {...}
etc...
@kuligaposten
Thats not what I meant and I was sketchy at best. I meant to say if one imports using the Bootstrap Studio import method for some reason the js sub folders in this case the modules are not included. I sometimes just download the website and import for testing and when I did this on your example the import was missing the import call for the module to be loaded. Once I realized it I imported the js file sub folder and all was good.
1 Like