I understand enough HTML to get a website working, some basic CSS, but am struggling to get an understanding of the basic structure of such a page as the above and realize I have to figure that out before proceeding with the rest. It would be helpful to learn this instead of just getting an answer to which lines in the code needs changing.
What specifically do I need to learn in order to set up a responsive Boostrap structure correctly? Are there any good beginner guides on this?
I know you won’t like to hear this but I would avoid bootstrap3 as it is wholly based on floats and a nightmare to maintain. Hardly anyone uses floats for layout these days so I would look at bootstrap4 which uses flex and is much easier to work with as you don’t constantly have to contain or clear floats. If you don’t understand what to clear or contain a float means then don’t pass go until you look that up
The basic grid methodology in either is mostly the same anyway
For bootstrap3 you mst study this page as the whole of bootstrap is concerned with the grid and all the examples you need are on this page.
You need to copy those grid set ups and play around with them until you understand exactly how they work and how to use them. This is the most important part because all bootstrap pages must have a certain structure.
There must be a container element as this contains padding for the gutters (which you shouldn’t change unless you know why). Then elements are always inside a .col?? element which itself must be a direct child of the row element. The row element has negative margins that match the padding on the container in order to set up the gutter system for the columns. Break or change one of these inadvertently and you break the whole layout.
Never change any of the boostrap files directly. Always make changes in your custom css with custom classes and in that way you avoid breaking the whole site.
Avoid changing container, row or column styles unless you are proficient. In essence you add your content inside a col container and then style your content as you want but let the bootstrap grid do its work from its defined column classes.
I didn’t know about those differences between BS3 and 4, but that’s no problem as I had decided on using BS4 anyway (I referred to the BS3 docs page because it has the layout and sidebar functionality/appearance I’m after -the BS4 and BS5 doc pages are different).
I suppose this is the equivalent grid documentation for BS4?
So basically create an emtpy BS4-based page with all the CSS/JS references (or something like the BS4 starter template), then insert the HTML examples from the grid system documentation examples to see what happens with the various combinations when I resize the page, and learn from that to see what would work for my particular site?
The easiest way to learn these is to set up a codepen with the bootstrap files in place (in the settings of codepen) and then copy the grid html snippets and play around with them to see how they work. You can put your custom css in the css panel of codepen and then you will soon learn how to make it do what you want with regards to the column grid.
Actually just fork my codepen below from the button at the bottom (once you’ve opened a free account) as it has the files in place.
You can remove the html and try your own or just try and modify what I have in place already.
Cool!
I actually started off with a blank BS-template to experiement with, but this is better as I don’t have to mess around with the path references etc. And I noticed it also auto-updates any changes. Neat!
I successfully “forked” your code over, after signing in, and understand this is just a geeky word for copying over someone else’s code with everything intact so I can continue working on it within my own account.
Thanks for the great suggestion and taking the time to create that code. I’ll try out the examples in the BS4 docs, but I have a question which I didn’t see covered there (or I wasn’t looking in the right place):
the sidebar nav (right side on this page) disappears when resizing the page to quite small (which of course makes sense at it takes up valuable space used for the content itself). What’s happening here, and is there a function in BS4 for removing a column when resizing the screen? All I’ve seen from the examples so far is how columns are being shifted around.
I think I read something somewhere about placing columns “off-canvas”, so maybe that’s what’s happening?
Bootstrap4 doesn’t use those hidden classes anymore but uses a display class in a similar way. The full documentation is here.
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
It’s easier if you just play around and add and remove classes until it makes sense.
No the side column in that bootstrap column is complementary and not really needed at all to use the site so is just hidden completely.
In my codepen the navigation is removed from the top bar and restyled to show in the hamburger. Some designs will place the menu off to the side and slide it back in when needed. That’s what is usually meant by off-canvas.
Off-canvas can also mean hiding things from eyes but not from screen readers or assistive devices. Some menus can be slid off canvas but not set to display:none. This means they are still part of the document but a sighted person just can’t see them. When you click a button they slide into view.
Aha! I think I’ve got the main idea now Here’s my codepen which has a header, footer and main content with various sections.
(PS: how did you insert the codepen image with link, like you previously did, into your posting? I can’t seem to find any button for that.)
The red section on the left is supposed to contain a sidebar nav (like the one on the BS3 docs page, but adapted for BS4). It now disappears when a screen is smaller than “medium”.
Does the general idea more or less look OK?
Just place the link text as normal text in you post and the system recognises it (i.e. don’t say “Here’s my codepen”, Instead just paste the link text straight into the post without using the post controls.).
I’m away on holiday for a week now so someone else will have to jump in if you have further issues.
