HTML/CSS Bootstrap Workshop March 2017


Last Section

Part 2: Adding a Header

  1. Now we'll be adding our first row, part of the Bootstrap grid system. A good cheat sheet for this system can be found at getbootstrap.com/css/#grid.
    Your code for this will be a div tag with a class of row. Don't forget to close your tag!
  2. Once we have our row, we'll need some columns. Bootstrap divides columns into twelfths. Let's make 4/12 (1/3) of the screen our logo and the other 8/12 (2/3) left for our title.
    Use the -md classes for this section to collapse your sections automatically on smaller screens.
    An example: <div class="col-md-4"> </div> <div class="col-md-8"> </div>
  3. In your first div (width of 4), you'll want to add your logo/image. We'll use Bootstrap's img-responsive class to accomplish this so we don't have to set a specific width. [Cheat Sheet]. Ensure your image has a reasonable height by adding some inline CSS styling:style="max-height:150px;" to your img tag.
  4. In your second div (width of 8), add a h1 tag with your title. Then use a line break (<br/>) to skip to the next line. Use <small> and list a subtitle. Don't forget to close all your tags!
  5. Check to ensure your page looks right by saving the file and opening your site!

Bonus Topics!

Next Section


Creative Commons License
Tutorial by Bryan Sherwood, NAU ITS STC