I just finished the first project, with a few speedbumps that felt good to solve.
Although I’m fairly certain this code probably isn’t the most efficient.
I’m not 100% there with understanding bootstrap, but my biggest issue was that I could not get the “image” to “fill” inside the “img-thumbnail”. First I added “col-12” as a class but wasn’t until i added “img-fluid” that it filled the whole frame from left to right.
To be honest, I peeked at the example code when I got stuck, I noticed it was way simpler, but trying to replicate that code in mine did not produce the same results. So I’m wondering what I could have done better.
Also, the example code has several different column designations above the “list”, but I didn’t add that to mine, and it still seems respond fine when I shrink my browser window.
was the example made with an older version of bootstrap and that’s why it’s different code?
The reason you were unable to get the “example project”'s code to function, and also why you are a little confused with bootstrap right now is because you initialized BootStrap 4 onto the document.
Everything that FCC is teaching up to now seems to be on BootStrap 3.
You can keep utilizing what you have learned by instead importing BootStrap 3. Or, you can dive into BootStrap 4, as you have here. You figured out that ‘img-responsive’ has become ‘img-fluid’.
Go to https://getbootstrap.com/docs/4.1/getting-started/introduction/ to find the most up to date class lists.
BootStrap 4 does have many of the same classes like “container” and "row"s.
It loses some and also utilizes flexbox more. so you can achieve what’s called Auto columns by simply using “col” instead of having to specify “col-xs-12” or etc. “col-auto” will automatically fit as many as 12 columns side by side as long as they are within the same “div”, similarly, you can use “col-6 col-auto” and it will automatically place 2 columns next to eachother.
Don’t call this project done just yet. Fill in your list timeline with random blurbs.
I recommend hiding list style bullet points (especially if you want them centered)
by adding this line of CSS