Bootstrap 3 , Main Template Styling & 2 versions of Jquery interfering with each other

[chrissa0000]

Hi!

I am using Bootstrap 3 and Jquery 3  for the testimonial card  in this page https://info.besocialscene.com/events-page?hs_preview=cpDBbirM-10249952633# after I put the code below in the head section,  the Jquery and Styling seems to interfere with each other.  The output is reading the styling from the Boostrap 3 instead of my Main Template Styling which is added here.

  .

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

I also think the built in Jquery library of Hubspot is also interfering with the Jquery 3  which makes the graphic positioned at the right instead at the middle.

[Siyabonga · Accepted solution]

Hi @chrissa0000 

In your css, you must override the default bootstrap 3 style that is causing the head section to be on the right. At the moment your styles plus the bootsrap styles that have not been overritten are styling the head section.

This will center your head section:

.testmonials #quote-carousel .carousel-indicators {
position: relative;
min-height: 100px;
top: auto;
bottom: 0px;
left: auto;
right: auto;
margin: auto;
padding-left: 0;
}

[chrissa0000]

@Siyabonga HI! , How do you overried the default bootstrap, is there any option or area to place that can make my default template styling the priority and the Boostrap 3 just secondary? 

[Siyabonga]

Hi @chrissa0000

Your stylesheet does take priority over the bootstrap stylesheet. Bootstrap comes with it's default style properties which you need to override when you style the same class/id selector that bootstrap uses.