Using Boostrap CSS issues (I know it's been discussed but I haven't found an explanation)

JonahO
Tourist
5 0 1

I'm using Dreamweaver's Bootstrap functionality.

I created an accordion for my FAQ. I linked to the Bootstrap css, js, etc via cdn. The code works inside my FAQ page in the Debut theme, since I can write directly in the HTML. 

The problem is that the Bootstrap CSS seems to block some of the CSS from the main theme CSS, which is weird because I'd think Bootstrap would only apply style to very specific classes etc. 

I tried loading my debut theme.css directly in the page, I tried copying it's entire contents into a <style></style>. My knowledge of all this stuff is very cursory. There must be a simple solution to only take what is needed from the bootstrap.css. 

Any help is greatly appreciated. Keep in mind my understanding of liquid is zero. I've gotten lucky so far just adding CSS code to the bottom of the theme.css. That's my only move. 

 

Thanks! 
Jonah 

0 Likes
JonahO
Tourist
5 0 1

Putting this code in the theme.liquid at the top solves it: 

 


{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' | script_tag }}
{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' | stylesheet_tag }}
{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' | stylesheet_tag }}



 

0 Likes