Adding Final Style Changes to the Proposal Show Component
This lesson walks through the final style changes needed on the proposal show component page.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

This should be one of the quickest videos in the entire course as you can see right here we have a little snafu

large

and this has to deal with some of the built-in Bootstrap styles and how they work whenever they are called improperly. Just like I did them. So as you can see this little block this card when it's on a desktop screen size it does not look great. And if I click on any of the other items This works great on all of the pages. Except for the show page and what the reason for that is if you scroll down to where we were actually looking at it

large

it all has to do with the data call or with the size call. So here I'm going to open a proposal-show.component.html and if we simply remove this (class="col-md-12") class call because what this is doing is saying col-md-12 and it's not even nested inside of a row or anything so bootstrap just doesn't really know what to do when we have classes that aren't set up properly. And that was all because I had copied and pasted this over from one of the other pages and that's what caused the issue. So now if we fix this

large

you can see that this is working perfectly just like it should. And that's all you have to do whenever you see whenever you see that kind of bug with bootstrap it usually means that you're calling the wrong class or it's not nested inside of the right item.

Resources