Trying to understand the Bootstrap box model

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.

Sure. It’s the Bootstrap sidebar with Affix and scrollspy template from Bootstrapzero I’m working with by the way.

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 :wink:

Yes you can have any combination of columns but all the -numbers (e.g. -4 -2 -8 -9) must add up to 12 per row.

The HTML can be posted in the editor, and slightly above the text box there are icons…select the </> button.

Website links are just as good.

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, 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?

Paste the WHOLE HTML file in. Then select everything you just pasted in and then hit hte </>.

If it works, go for it. I’m headed to bed shortly so I haven’t inspected your code. Sounds right though. And you say it looks right.

Aha! That worked a whole lot better :smile:

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
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?

Bootstrap is open source so you can do as you please.

Any framework, whether it’s Foundatino or Bootstrap, they just want you to use their product. There is no cost or anything. Enjoy!

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 :smiley:

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?).

Not sure - but bootstrap is very common and I’m sure others have used their sidebar example. I wouldn’t worry about it.

You’re probably right as it’s discussed several times in the Bootstrap “issues” section.
Thanks again :smile: