I know the principles of the CSS box model but could someone please explain how the boxes in Bootstrap work and relate to each other? I see they all have different class names, so does this mean that each class relates to a specific box at a specific position?
Or does the CSS class just define the size/appearance etc. and where it’s placed depends on which order you put insert the HTML code for them?
I’ve found a Bootstrap template which closely resembles one of the pages I want to design, but the sidebar is on the left and I want it on the right hand side.
Could you post a code snippet that you want explained?
They have a block system where each “row” must add up to 12. So if I have “.col-md-4” then on MEDIUM screens, that will take up 4 columns. So I could add in 8 other 1column columns, or 1 other 8column column, or anything inbetween. It just has to add up to 12. These frameworks work from small up so if I specified 4 column on small, medium and large would ALSO get 4 columns unless otherwise specified. You can set small medium and large values to be different though, but if you don’t specify, it inherits the lower screen size value.
If you want it that sidebar on the right, you could simply just switch the HTML source order. Simple as that.
Let me see if I get the basic principle (I found a graphic representation of what I believe you’re talking about here):
So each horizontal row (across from left to right) must consist of twelve “.col-md-4” boxes, or the equivalent in “box width” (e.g. 1x “.col-md-6” + 1x “.col-md-4” + 2x “.col-md-1”)? And they’re all displayed in the order they are in the HTML document?
As for the HTML code… How do I insert it here (without it being interpreted as HTML by the forum)?
Anyway, I tried several things (take a look at the source of the above link) and finally succeeded by moving the navbar code (between the “left” and “/left” comments) to right after “/right” comment and closing DIV (but right before the closing DIV and “/row” comment. Does this seem right? I hope there’s a way to post code here as it would make things a lot easier
Thanks for clearing that up.
Yes, I did try the various icons including the one you mentioned but I could only paste one line at a time after getting the highlighted “indent preformatted text by 4 spaces”. Gets very tedious with several lines of code.
I did try to paste the code into Bootply.com, finding that as an alternative, but couldn’t get my JS and CSS files to be included as links or by pasting, but then I discovered the “Affix left sidebar + scrollspy” template at their site which looks to be the same as the one I’ve just downloaded from elsewhere!
So I used that and moved around the sidebar HTML code as mentioned, having it on the right hand side instead. I also changed the switched the “leftcol” and “rightcol” IDs and changed the single occurance of “#leftcol” in the JS to “#rightcol”. I’m really just experimenting here, but it seems to work like it should. Here’s my edited code.
What do you think?
The code seems to work alright, but for some reason is a bit “choppy” when scrolling, so I took another look at the sidebar nav code I was inspired by in the first place; the doc pages for Getbootstrap.com.
It works very smoothly and has sub-sections, but lacks the animation (I was able to make this work by inserting the JS code from the “Affix left sidebar+ scrollspy” template). It needs some cleaning up, but otherwise seems to work great.
The big question is if I’m allowed to use this code for my own site or not? I can’t find any contact information for Bootstrap, so there’s no obvious way to get in touch with the developers to ask. It does seem like Bootstrap is all about sharing code so I’m fairly optimistic about this, but would want to know for sure before going ahead and using if for my own project. Does anyone know what the developers have to say about using their code?
You may be right (having read both the MIT “code license” (which seems to apply to the actual file downloads) and the CC “documentation license” (both links at the bottom of their site) which could be interpreted to include anything on their website related to Bootstrap as well
I just found it odd that although they include a basic template and examples) which they encourage people to use any way they like, the sidebar is only used for their own website, perhaps indicating a license issue (why would they otherwise leave out an IMHO excellent piece of code?).
