How to include Bootstrap files in a theme?

Asked

Viewed 2,219 times

2

I’m trying to include the responsiveness of Bootstrap in Wordpress, I tried via CDN and among some other methods but it works kind of partial. For example: If I apply type classes container, row, a classy button alert works, but when I try to make a navbar "collapsible" the menu is all deformed and without styling (even taking code ready on the Bootstrap site).

I created the files header, index, sidebar, footer, functions, style and I haven’t walked anything yet because I can’t make this thing work right.

file folder of how I am doing with print of how the menu looks. it does not take the style nor the responsiveness

https://drive.google.com/file/d/0B1FJOnA41Xp6VjdzRDlKRWRRRUU/view?usp=sharing

twitter-bootstrap wordpress

  • Other .css is passing "over" the bootstrap. In HTML, any .css that comes after OR has the suffix !important after its property will have higher priority. Example: bootstrap applies all of its CSS in navbar that you just created. However, it was called BEFORE another .css and then this .css retarded has the same bootstrap CSS properties, result: it overwrites bootstrap.

  • Some plugin (or theme itself) may be calling another version of the bootstrap you want...anyway, use the INSPECTOR OF CHROME ELEMENTS (F12) to check if the properties exist and if they have been overwritten

  • Guys do not know what happens, bauxei a simple theme that uses bootstrap but when I copy my sublime does not roll , I upei the folder of my project if you can take a look I put a print of how it looks the menu , and the responsiveness does not roll tbm , I do not know why. https://drive.google.com/file/d/0B1FJOnA41Xp6VjdzRDlKRWRRRU/view?usp=sharing

1 answer

1


You also need to add the Javascript file because these components depend on Javascript code. Put after your tag that includes the JQuery.

Example to put on <head>

<script src='/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
. . .
<link rel='stylesheet' href='/wp-content/themes/xpto/css/bootstrap.min.css?ver=3.3.4' type='text/css' media='all'/>
<script type='text/javascript' src='/wp-content/themes/xpto/js/bootstrap.min.js?ver=3.3.4'></script>

Here I’m guessing your theme is called xpto

Obviously you can use CDN.

Browser other questions tagged twitter-bootstrap wordpress

You are not signed in. Login or sign up in order to post.