My first project, the tribute project massive issues with bootstrap and css need help!

My first project, the tribute project massive issues with bootstrap and css need help!
0

#1

So i finished the courses on bootstrap, jquery and html, css. The thing is now when i actually have the chance to implement what i have learned i’m stuck! The problem is that i don’t know how to position elements, images and using the grid system it’s hard! I dont know what to do.


#2

One tip at least I find helpful:

When doing your initial layouts, for each of your DIV’s in the CSS turn the ‘border’ such as as follows:

border-color: black;
border-style: solid;

A common ‘getting started’ frustration is ‘Why doesn’t this element/div X sit nicely/next too this other div Y’ ?

Turning on borders will show you the entire area the space of your created DIV takes up. You may find out the div you’ve made is either larger or of a different size/shape than you expected. Having the border on allows you then to alter the needed div properties accordingly to tweak alignments and then, when everything looks good, just remove the CSS border properties.


#3

Thank you for answering this is a very good solution! i will try and work with this!


#4

Just to piggyback off @abalducci’s excellent suggestion, if you want to see the area of every single element in the entire DOM at once try:

*{
border: 1px solid #000000; 
}

That asterisk is a universal catch all for everything displayed in the html. I have used it more times then I can count :laughing:


#5

This is a gold mine! Thanks!


#6

theres a chrome extension to do this too: https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh a little bit nicer and you can just click it on or off


#8

That’s awesome @sw-yx! I will definitely check that out (seems a bit more intuitive too).