Intro to HTML and CSS – Applying Bootstrap Grid System


Let’s take a look at the page’s structure and see if something needs to be changed. In the instructor’s notes you’ll find a DOM built from the design. Check the link. I’ll go ahead and open it here by going and opening the file because I have it saved to my local machine. And we can see the design here. It doesn’t quite look like our original mock up. Let’s see if we can change it so it does. I’ll go ahead and open up the Developer Tools. For that I’ll press Command + Option + i on my Mac. There will be links in the instructors notes for instructions on different operating systems. Now that I’ve got my Developer Tools open. Let’s take a look. First off, let’s go ahead and modify the header. I will open up the div and we can see that the header at the top of the screen is highlighted. And let’s go head and make some modifications. Around the whole thing we need a row. So, I’ll right-click on this div and click add attribute. I’ll type in class equals row. By adding row here you’ve changed the way this element on the page looks. Inside of our row we needs some columns. So I’ll right-click on the first and click at attribute. Here I’ll type in class equals column medium 6, indicating that we want the column here to take up half the page. This is supposed to be the logo that’s on the left side of the header. I’ll press enter and we can see that now, this div only takes up half the screen. Let’s do the same for our name. I will right-click on the div and click Add Attribute. And, once again, we wanted to take up half the screen, so we’ll type class equals column medium 6. Press enter. And now we can see our two divs are each taking up half of the header. Now, I’d like you to go through the divs for the rest of the page and add some classes. Do your best to make this website look like the mockup. But be warned, you might have some structural problems. Make sure you’ve got all the right divs on the page. You might find you need to add some divs to this page in order to structure it properly for Bootstrap. What steps did you take to meet Bootstrap’s requirements for the page structure? Did you add a container div outside of your rows? Did you add divs to organize your columns in to rows. Or did you add columns inside rows to organize your content? Check all that apply.

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *