I am using Bootstrap in a theme I am building for a client. I have just started, and this is the first time I have used the new Bootstrap version and the new Concrete together. When I am logged in to Concrete the .container that I am using is constricted to 940px which seems to be coming from ccm.app.css
However it should be expanding to utilise the media query of 1200 making the grid-system bigger. But is being stopped by the css file from Concrete above.
I am using a customised version of Bootstrap (I didn't change any options within it though), again a new thing for me, as normally I get one where the responsive css is in a separate file.
Is this a common issue? As I can't find anything about it anywhere, and is there something simple I can do to amend it? Or is this simply a bug in Concrete as I know they prefix their Bootstrap classes so they don't conflict with one being added in to a theme?
Thanks for the speedy response, and I would much prefer to use the new version of Bootstrap rather than back pedalling on the older one, which from the looks of it shouldn't be having this issue surely?
Yes i have indeed, and when I remove the 940px limit that is being added by ccm.apps.css, it utilises the responsive widths for the container. I've had to get the bog standard version of bootstrap which gives you a responsive.css file and a bootstrap.css file, and within my header template, put the responsive one under the required php function so that it takes precedency over the concrete version.
Concretes bootstrap obviously doesn't use the responsive and just sets the container to 940px
I first tried modifying the concrete css file, however it controls the dashboard as well, and removing it made the dashboard boxes span full width of the page.
I presume this is an issue with the way the concrete team implemented the new version of bootstrap and didn't add their own prefix to the container class, I don't really know why they haven't, but it would seem to be the only fix to stop it from affecting themes with bootstrap included.
This is something that defiantly affects the newer versions of these systems, as i've always done it the same way without this issue
I think part of the problem here is that we're not properly namespacing all of the bootstrap in ccm.app.css. For example, the .container classes and .row classes aren't being wrapped by .ccm-ui in our ccm.app.css which makes them greedy. We will try and address this in an update.
When using a bootstrap theme and having the below CSS set up the span5 and span3 class use the bootsrtap.css and not the ccm.app.css. for @media (min-width: 1200px) only. This results in the two columns being too wide and does not place them side by side in the window.
You can definitely work it out by spliting the bootstrap library but it's not really convenient. I don't know if there is a better way to work it out.
I have run into this issue to with a site that was started on 5.5.whatever and is now 22.214.171.124. The conflict comes from ccm.app.js and bootstrap both having bootstrap dropdown in there code which will not neccessarily conflict but basically call the toogle twice. This sets the state of the dropdown to open and then close but it is so fast that it looks like it never does anything. I have not found anything online about how to solve this issue. What I have done is just when I need to I rename bootstrap.js inside concrete5\concrete\js\ to bootstrap2.js so it wont be loaded which allows the dropdowns to work but can mess with some other functionality. So I only do this temporarily. Someone needs to come through with an answer of how to fix this. For me I believe the problem only occurs on the sites that went from 5.5 to 5.6.