Bootstrap div confusion!

I made it up to the jQuery lesson and I’m getting frustrated with Bootstrap. I feel like the lessons tell you the steps to take to do something but they don’t explain why or how it works. I feel like I’m just drowning in divs and I can’t even tell where one begins and the other ends (seriously, when a div closing tag comes up, how do you know which of the 14 preceding divs its closing?). Also, I pasted the Bootstrap stylesheet code (which for some reason doesn’t show up here when I paste it in) into my Mozilla thimble page and none of the divs from the lessons do anything. I tried the same thing with Font Awesome with a similar result, so maybe I’m doing it wrong?

you can expect to see a lot of that when working on a production site!

honestly though, you will see a LOT of divs. i think its important early on to adopt a format that makes it easier for you to read. a lot of figuring out what closes what and where something begins is experience. but there are a few things to consider:

  1. its a LOT easier when you start everything from scratch on your own. that way YOU will know why you created the divs in the first place. doing the exercises on here is certainly great practice, but its going to be hard to figure out simply because when you thrown into the exercise you had no idea what the end result is supposed to be. does that make sense? its like someone telling you a recipe when you have no idea what the final dish is suppose to be.

  2. its also a lot easier when you name your divs and put comments about what they are and why they are there. i would definitely advise you to start doing that from the beginning or else you are bound to run into the same situation eventually.

  3. it will get easier the more you do it. pretty much everything is going to look like that because of all the different tools you can use. bootstrap really isnt that hard once you go through it a few times. i know it gets boring and repetitive after a while but it really will benefit you to stop and start back over once you get to something you dont understand. like you said in your post, the exercises take you through step by step but sometimes thats all your doing is going through the motions without any clear objective and for me, personally, its very difficult to retain the information that way plus its way too easy to just keep doing the steps until some exercise comes up and you have no idea what they are talking about. so when that happens just stop and start back over or at least go several steps back to a part that you did understand and read again through the exercises.

one of the things i started doing when i first started doing sites like this one was to grab some code and paste it into an editor and makes notes on what it was and what it did and id save that file for the times when i had to recall that information. i probably have over 100 files on javascript alone (functions, switches, constructors, etc).

anyway, sorry for the long post but i hope this helps in some way. the biggest thing to remember is to just keep doing it. you will get better at it but it takes time. but it is important to completely understand the process and not just type stuff into an editor to make a box fade in and out. so try not to get frustrated, go back and rework some of the earlier steps and try to understand the progression.

and feel free to let me know if you have any other questions

MC

1 Like

In early projects I relied heavy on Bootstrap for responsive design. Now it’s about 25% Bootstrap and 70% of CSS responsive design (builtin and frameworks like W3CSS), 5% are some jQ/JS tricks. As MC said if you write your own code, you tend to know your divs :wink: But just wait for the moment when you will create html elements via jQuery, it will get weirder :stuck_out_tongue: If you will find yourself confused by jQ, go to CodeCademy and fetch their jQ course- it straightens certain things out.

Note: % ratio will change in the future in favor of Bootstrap :wink:

udacity also has some decent courses and they have one or two jquery ones. also w3schools has one if i remember correctly.

each site teaches a little bit differently. some spend more or less time on different elements. but on pretty much every course ive been through, regardless of the site, there has been at least one time where i was trucking along pretty good thinking that i was understanding everything and all of a sudden BAM! you look up and have no idea whats going on. some sites are better about it than others and they pretty much all go through the material in a different order. but eventually everything should start to click and youll actually begin to understand it instead of just knowing how to follow the recipe.

cheers!
MC

Thank you for that thorough response! It sounds like divs are maybe something lots of people have trouble following at first. Good to know just old-fashioned practice practice practice will eventually help me understand. I like your idea about using notes to help keep track of everything, too, and backtracking to previous lessons when necessary. I’m also doing Codecademy and they have a very different teaching style, which is nice.

But really, the issue for me is how does the computer know which div you meant to close? There has to be some kind of rule. Because that closing tag you just typed could literally apply to any of the previous divs, but somehow the computer knows which one you meant. But, I’ll keep after it and I’ll probably get it eventually.

Thanks again for the response!

Can I clarify something first? You know when they first introduce Bootstrap and they say “Here’s the link to the stylesheet you would use but we already took care of that behind the scenes”? Well, to use Bootstrap, you would just need to paste that into the of any website or CSS file, right? I tried doing that my sandbox page on Mozilla Thimble and it didn’t do anything, so I wasn’t sure if I was doing it wrong or if maybe Mozilla Thimble isn’t compatible with Bootstrap or something.

Can you clear this up for me?

Thanks for the response!

for the first question, the computer knows because it works in a nested format. so if you have something like this:

i understand the divs wont have numbers, so imagine them without the numbers first because they are only there for labeling purposes.

div 1

div 2

/div 2

div 3

/div 4

div 4

/div 3

/div 1

all the rest are nested inside of div 1. so when you alter div 1, you will alter everything inside of it. div 2 is inside of div 1, but it has nothing inside of it. so when you alter div 2, div 2 is the only thing that will be altered. div 3 is inside of div 1, but it also has div 4 inside of it. so when you change div 3, it changes div 4 also but not div 2 or div 1. div 4 doesnt have anything inside of it, but it is inside of div 3 and div 1, so if div 3 or div 1 gets changed, it will affect div 4 as well.

if you have a lot of them it can be hard to keep track and ill admit sometimes i have to draw it out just like this in order for it to make sense to me. thats why when i code these things i indent in a pattern so that its easier to see and understand. like this:

div 1

  div 2

  div 2

  div 3

         div 4

         div 4

  div 3

div 1

now its a little easier to visualize, right?

does this answer that question?

Yeah, that does make it easier to visualize. I feel like if they had just made numbering divs a mandatory part of the code like you did in the example then that would make reading it easier on everybody. And definitely indenting makes things clearer.

So, in your example…

div 1

div2

/div2

…you’re saying you would know that closing tag didn’t refer to div1 because then all the divs that follow wouldn’t be nested inside anything?

as far as the second question, what is the link you are using for bootstrap?

as i recall you will need both the script and the stylesheet. both will go in the head section, the script should be between script><script tags and the other should be a stylesheet link.

if thats not right then im sure someone will chime in but i believe thats correct.

i am not familiar with thimble but it would probably be optimal to download the files yourself and link to them locally if thimble will allow it.

now you got it!! thats exactly right. its not 100% of the time because there are exceptions, but MOST of the time the divs are in sections (divs inside of divs inside of divs that are all part of one big div) so USUALLY you can start with the one at the top and the one at the bottom and say , ok this would be div1. then start working your way up or down and just make sure every open has a close. just remember that everything has to fully nested so if you work in pairs of openings and closings its usually not too difficult to figure out, its just frustrating as hell sometimes! hahaha

open 1
open 2
open 3
open 4
close 4
open 5
open 6
close 6
close 5
open 7
close 7
close 3
close 2
close 1

you could start at either end and say ok, there is an open and a close so those go together and thats div1, then the next one