topic Bootstrap 3 , Main Template Styling & 2 versions of Jquery interfering with each other in CMS Development

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

chrissa0000 — Fri, 28 Jun 2019 12:42:15 GMT

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.

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

Siyabonga — Fri, 28 Jun 2019 13:47:59 GMT

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;
}

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

chrissa0000 — Mon, 01 Jul 2019 15:19:27 GMT

@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?

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

Siyabonga — Mon, 01 Jul 2019 19:15:03 GMT

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.