@zdman135 yes I already did quite a bit of flexbox tutorials.
Sort of my "problem area" is when it comes to really knowing how the bootstrap classes work by reading it up inside the devtools. I got better at it, but I still struggle quite a bit with reading stuff in devtools.
Like in the erin webpage it seems like I am not able to read it, like if each class was a bootstrap class, cause it seems to be squarespace.
Newmoon recommended to me to learn the bootstrap classes by looking into them via the devtools and this way really learn frontend development from the ground up. But I often do not 100% know what's going on because of so many properties going on and interfering with each other..
Also with the canvas I think you are quite right. And I think I am too much thinking that there is sort of "one" way of doing things in an "industry standard" way.
But after this conversation it seems to me, that workflows are not as rigged as I initially thought.
@zdman135 Hm okay the devtools part calms me, somehow I thought I was missing something and for other people it's completely easy.
I guess I will just change my thoughts of having to decide forever to use or not to use bootstrap, to a more open approach of studying and using it whenever I feel comfortable. I already gained a bit of insight into how things work, by just getting to know how classes are stacked on top of each other to build a basic nav bar...
@bradtaniguchi yes the more code I write the more I really internalize learning by doing. I guess we are just so used to study things by heavily reading about them, from learning in school etc.. but writing code is different and I still often forget that a bit sometimes..
overflow: hiddenand then flex with
justify-content: centerto center them nicely
just a small question on a w3c tutorial for bootstrap navs. I am reading up a bit on them again, but in this example I am wondering why as soon as the brand class is put into the html, the responsive ul goes to the right and doesn't stack vertically on the left.
Does anyone know why it's behaving like that?
brandclass in the <ul> tag. I also tried reducing the screen size, but the
brandclass does not appear. When I add it in, it doesn’t do anything. it remains the same.
horizontaland to the
leftand next to the
logo, and why, the links move to the
right, and are stacked vertically. you have to look at the box that is holding both the logo and the links. and when we look at that box we see the following css:
display:flexso they’re using flexbox and
justify-content: space-between. so basically in this case there are 2 boxes within the big navbar (class) box holding it and it will push the 2 logo and links boxes as far apart as possible within the navbar box holding it. I hope that helps explain it.
dev-toolsin your browser really helps. cause you can see what is going on. what css classes and attributes are being applied, and how big a box is.
@zdman135 wow thanks.
This really helps me a lot to basically understand what's going on in a bootstrap navbar.
Now I am understanding quite a bit more, where to start looking to understand the basic behaviour of a navbar created with bootstrap.
Basically I wanted to try out creating a layout similar to this one: