Owl Carousel issue with Bootstrap tabs

Im almost done with creating a neat user profile page where users can watch their profile. Im working with the Bootstrap framework integrated in Wordpress. Im using Bootstrap's Tabs in order to get a lot of info on one but and keep it clear for the user. I have two main tabs, called "AWF I" and "AWF II", inside those tabs I have info about the fund, and a Owl Carousel to display pictures As you can see the carousel works great, but when I activate tab "AWF II" I get this: As you can see, the pictures / carousel itself are super small, and I have no idea how to overcome this, the carousel should display like the one in the "AWF I" tab. Here is a clue that might give you guys some idea on why this is happening: when I rightclick and inspect the element in Google Chrome, the carousel pops to the correct size like it should be: but when I switch back to "AWF I" after, that carousel displays the small images, so basically, inspecting with Google Chrome makes them switch role.

Here is the code I use to call the carousel:

$(document).ready(function(){

$("#owl-awf1-properties,#owl-awf2-properties").owlCarousel({
    pagination: true,
    loop: true,
    dots: false,
    autoplay: true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:  {
            items:2
        },
        450:{
            items:3
        },
        767:{
            items:4
        },
        991:{
            items:5
        },
        1199:{
            items:5
        }
    }
});

});

Any clue on this? please let me know if you need more info! Thanks!