[Resolved] Problems with Bootstrap

[Author]

Posts

[gerritA]

Hi,

I'm currently trying out views to display dogs from an animal welfare organization on their wordpress site. Now I got the basic functions working, but I have problem with boostrap. When I activate it, it destroys my layout and narrows the side bar significantly. Unfortunately I'm no expert in coding, so I can't figure out the reason why this is happening. The site is using the twenty fourteen theme. I added two screenshots so you can see, what I mean. Setting with Bootstrap is "Toolset should load Bootstrap 3.0", without is "This site is not using Bootstrap CSS". Can you help me out?

Best regards,
Gerrit

[Waqar]

Hi Gerrit,

Thank you for contacting us and I'll be happy to assist.

I'm afraid, the screenshots are missing from the message, but in general, a situation like this can be faced, if the active theme or some third-party plugin includes some styles, which conflict with Bootstrap's default styles.

You can use Chrome browser's dev tools to inspect the available styles, their impact, and source of origin, as explained in this guide:
hidden link

In case you still can't find the conflicting styles, you're welcome to share the link to your website so that I can view the code and suggest a workaround accordingly.

I hope this helps.

regards,
Waqar

[gerritA]

I added the screenshots again. I am currently creating a staging site so that I can investigate this further without editing the live site. I will contact you again, when I can't solve the issue.

[Waqar]

Hi Gerrit,

Thanks for sharing the screenshots.

I'm afraid, the screenshots alone won't help in this situation, but you're welcome to share the link to the website, in case you need any further assistance with the troubleshooting.

regards,
Waqar

[gerritA]

Hi Waqar, thanks again for the fast reply. The link is hidden link. Once I finished creating the staging site I can also give you an admin access, should you need it.

[gerritA]

Okay, I found something out.
I used the inspect feature on the side bar and if I deactive these two options, the layout goes back to normal:

* {
/* -webkit-box-sizing: border-box; */
-moz-box-sizing: border-box;
/* box-sizing: border-box; */
}
But I'm afraid I don't know how to fix this now, even with this information. Here is a link to the staging site with Bootstrap and the error activated: hidden link

[Waqar]

Hi Gerrit,

Thanks for sharing the update and glad you've narrowed it down the to the code that is resulting in the layout difference.

Your active theme is calculating layout widths slightly different than Bootstrap, which is considered a very good standard in terms of cross-browser support/compatibility.

My recommendation would be to keep the Bootstrap styles intact and instead override the theme's styles, on a case-to-case basis.

For example, to make sure the width of the sidebar area remains the same as without the Bootstrap styles, you can include the following custom CSS code at WP Admin -> Appearance -> Customize -> Additional CSS:
(or your preferred place to include custom CSS code)

#secondary {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

I hope this helps.

regards,
Waqar

[gerritA]

My issue is resolved now. Thank you!