Верстать на bootstrap удобно, удобно когда необходимо сделать версию адаптивную версию сайта. Большинство стилей уже прописано и работает так как надо. Так-же в bootstrap есть различные компоненты, например карусель. Не надо прикручивать сторонние скрипты. Хотя конечно если потребуется от карусели немного больший функционал, то лучше прикрутить что-нибудь помощнее. Например я не увидел в коде карусели как динамически добавлять/удалять элементы. Возможно плохо смотрел. И столкнулся я еще с одной неприятной ситуацией. А именно выравнивания блоков по высоте в каруселе. Пришлось написать костыль.

$(function() {
   //normalize carousel heights
   var maxheightsCarousel = 0;
   $('#mycarousel).on('slide.bs.carousel', function (e) {
      let hDiv = $(this).find('.item.active').children('.mycarousel-caption');
      let h = hDiv.outerHeight();
      if(h>maxheightsCarousel){
           maxheightsCarousel = h;
           $(this).find('.item').children('.mycarousel-caption').each(function(){
               $(this).css('min-height', maxheightsCarousel);
           });
       }
   });

    $('#mycarousel').on('slid.bs.carousel', function () {
       let hDiv = $(this).find('.item.active').children('.mycarousel-caption');
       let h = hDiv.outerHeight();
       if(h>maxheightsCarousel){
            maxheightsCarousel = h;
           $(this).find('.item').children('.mycarousel-caption').each(function(){
               $(this).css('min-height', maxheightsCarousel);
           });
       }
   });

   $( window ).resize(function() {
       maxheightsCarousel = 0;
       $('#mycarousel').find('.item').children('.mycarousel-caption').each(function(){
           $(this).css('min-height', maxheightsCarousel);
       });
   });
});