I'm having an issue with Bootstrap on twentyseventeen theme. I've included Bootstrap, everything is loading, but Bootstrap changed the theme's font size and margins even though it loads before everything so it shouldn't affect other styles. Has anyone encountered this before? I've googled it and come up with ziltch. Any ideas?

closed as off-topic by Mark Kaplun, cjbj, Jack Johansson, kraftner, Howdy_McGee Jul 7 '17 at 14:39

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • sorry, but this is not a real question. questions are at least expected to include relevant code. – Mark Kaplun Jun 17 '17 at 15:43
  • It is a real question, how can it not be, it is an issue I'm having that I need to discuss with the community. I wasn't aware beginners weren't allowed to ask questions that weren't "advanced enough". What code do you want me to post? The enqueuing works fine, does what I tell it to do, but for some reason the css of bootstrap is interfering with theme's css when it is not supposed to. What code would you have me include here? I just want to know whether someone had a similar issue they managed to resolve with a plugin or sth, since I couldn't find any solutions online. – TangledHeadphones Jun 17 '17 at 15:53
  • "does someone else have this bug?" do have a question mark, which makes it a question in most languages, but questions here should be answerable with authority. A yes or no answers are both valid to your question and have zero value. To make it worse you ask about bootstrap which is not part of wordpress and therefor off topic here – Mark Kaplun Jun 17 '17 at 16:02
  • I've asked if someone had "any ideas", which does mean "any ideas as to how to solve this", and it does have to do with wordpress because it is wordpress i'm trying to integrate bootstrap into. I'm sorry if this question offended you in some way, but you are free to skip what you do not like. – TangledHeadphones Jun 17 '17 at 16:11
  • WordPress just loads the CSS files like you tell it to. The issues lines inside the CSS files. There are possibly rules/selectors that trigger both the Divi and the Bootstrap CSS. Hence you get the mix up. This would also happen on a static HTML page where you run the Divi and the Bootstrap CSS. – lowtechsun Jun 17 '17 at 16:20

Bootstrap classes are not the same classes in WordPress, you need to write Bootstrap HTML markup into your theme file and then it will work. Here look at the examples given and mix the Bootstrap HTML with WordPress template tags and PHP.

Start with this basic template and replace the parts that you want WordPress to do for you. For that have a look at the loop and the Wordpress template hierarchy.

Get to know template files and check out this fantastic series of small tuts to get you going with the basics. If you go through the first couple of tuts, "adding" Bootstrap to WordPress will be a breeze for ya. But then you might want to create your own theme instead of relying on Bootstrap?

  • Thanks for the reply, I really appreciate it :) I've included some static HTML code inside the front-page.php file and its PHP code, and it shows on the front page as it is supposed to, but my font-sizes and margins got reduced for some reason, and are showing too small on the entire website, not just the portion using Bootstrap. But I'll check out the tutorials you've linked, and if i have too I'll correct all these one by one. As for making my own theme, I'm afraid I'm too much of a beginner with PHP for that. – TangledHeadphones Jun 17 '17 at 16:06
  • That was what I thought too at first until I finished the tuts with perseverance (no talent or Physics PHD needed, just training) and scored a client website with the knowledge within a month after that. Go through it, in 30 days you won't look back and glad you followed through. The course material is up to date and the bit and pieces you need are across here and here. As for the fonts, you possibly have double font definitions declared in the Divi and Bootstrap CSS. Really best to start with your own basic theme before you go further. – lowtechsun Jun 17 '17 at 16:14
  • Also, the fonts etc. and other issues are not really WordPress issues, but drive from the fact your mix the Divi with the Bootstrap CSS and possibly have the same selectors with different values that override each other. In your HTML you need to specifically assign the proper classes to the classes given in Bootstrap CSS, otherwise the HTML either won't have any style or use the Divi CSS by chance if for example it uses a universal CSS selector. – lowtechsun Jun 17 '17 at 16:16
  • Thanks! Do you happen to know where I could post such questions if they are not appropriate here? – TangledHeadphones Jun 17 '17 at 16:19
  • Here tagged CSS and HTML for example. – lowtechsun Jun 17 '17 at 16:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.