I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.
Related
I designed a page. Everything was working fine, and then I was going to add a carousel into a mobile media query in lieu of what I had already had, and noticed that just by loading in Bootstrap all my page got messed up.
What is bootstrap changing, or overriding? Or what does Bootrstrap override by default that I don't know about. I tried googling for an answer for a few hours but couldn't find anything. I even checked an article top 10 common mistakes with bootstrap.
you could potentially have class names that are also bootstrap class names, which would override whichever styles you had on those classes. If you look at the bootstrap documentation you can compare your class names to bootstraps. whichever components of yours are effected, check for similar components from bootstrap and you may just have to change some of your class names.
Double check your media query. You might have set it wrong.
Also, which carousel are you using? Bootstrap carousel? Please upload some attachments for better understanding.
I'm facing an issue, where the bootstrap modal is not displayed correctly. The modal can be toggled. If it's toggled, it appears as another DOM element in the flow, instead of a dialog. Here's what I mean:
What I've tried:
I've manually enqueued the jquery and bootstrap javascripts and check their paths. They're valid. For debugging purposes I've taken the sample code from the bootstrap documentation and put it up on a separate page(Go there). Same result. I've tested other websites using modals, so it's definitely not some weird browser issue.
My guess is it either being a dependency problem or a conflict with the wordpress theme I'm using. I've run out on ideas how to fix this, any help is deeply appreciated.
Dependencies:
I think that you didn't import the CSS file. I checked your site. You only included bootstrap layout CSS and didn't include the modal.css. please include the modal.css.And popper.js file has an issue. please upgrade the js file.
My php page styling is done but when I added it to my existing html template ( which has header and left menu ) I noticed that template css menu is messed up.
While debugging what part of styling is causing an issue, I realized its due to bootstrap.min.css which I used while referring to w3schools BootStrap Progress Bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Any pointers on how to avoid this? I thought of adding a wrapping container for code but not sure how to make the change. Any suggestions?
This is a difficult issue to solve as bootstrap has a lot of default styling. The only thing I can recommend is:
Be sure that your styles come after the inclusion of the bootstrap stylesheet. This way your styles will overwrite bootstraps styles where there are conflicts.
If this does not fix the issue you will probably have to use the code inspector to find all instances that you think are incorrect and override them in your own stylesheet. This will be tedius, but if you want to use bootstrap and you have conflicts it may be your only option.
Bootstrap used to have a customizer allowing you to download only what you want, but it seems that in version 4 it is a little more complicated to do this. If you are already using version 3.3 then I would recommend downloading a customized version: https://getbootstrap.com/docs/3.3/customize/
I have some problem with css files, to be more detailed i have linked 2 css stiles in one html file one is style.scc and bootstrap.css I am using bootstrap social button and that's why i need bootstrap. but this movement has changed almost everything in my site...
so is there a way to call bootstrap.css file in single div and in aver divs to have original css file?
PS css Scoped property don't works from me!
No, it is not possible, if you only using bootstrap for social button - just copy styles from bootstrap.css to your stylesheet (style.css).
Scoped CSS works only in Firefox for now.
Never mynde i founde the solution from "here"
you mast set the mos important css file the last and the least important first
:-)
Bootstrap already has a feature in their site to help you doing custom builds, check it using the following link: Customize.
Also, you can always get the source code and working with it by yourself.
For more information, check the following link: Compiling CSS and JavaScript.
I am trying to build my own theme, but I am looking for a good markup page that has all the components and buttons, and navs, and such all on one page. I have tried to create one myself and I just don't have everything that you would see on a theme preview website. Is there a good markup available?
I'm not sure if i get you right, but normaly those both links should give you a good starting point! very well documented:
Bootstrap getting started
Bootstrap Components
Talking about that you can find it in the bootstrap website.
In the components of that site.This component tab has all the components but you can also check the javascript tab
http://getbootstrap.com/components/
http://getbootstrap.com/javascript/