A Bootstrap Layout for Pickup Soccer - Exercise

Contact Us or call 1-877-932-8228
A Bootstrap Layout for Pickup Soccer - Exercise

A Bootstrap Layout for Pickup Soccer

Duration: 15 to 25 minutes.

In this exercise, you will realize a new design for the Pickup Soccer site using Bootstrap, presenting the site differently for mobile and desktop users. Here are the desktop and phone views of the finished page:

Pickup Soccer design screenshots

For desktop users, let's present the header with a smaller left column, with a tagline and global nav element, and a larger main right column with the title "Pickup Soccer". In the main body of the page we'll show the goal-line/net photo (for desktops and larger) on left and the main body content on right. On phones, we will hide the top tagline and linearize the layout, with the right column sliding under the left column.

  1. Open the file FrameworkFoundation/Exercises/soccer/index.html in a browser, and open FrameworkFoundation/Exercises/soccer/index.html and FrameworkFoundation/Exercises/css/soccer.css in a code editor.
  2. Using the outline and comments provided, add appropriate HTML markup, with the appropriate classes, to layout the page as shown.
  3. Style the "pills" navigation to match the design.
  4. Be sure to render the left image responsively, so that it is constrained to fit the width of its parent container.
  5. Be sure to address the specifications for desktop (top tagline shows, two-column layout) and mobile (bottom tagline shows, one-column layout) from the screen shot above.
  6. Use a custom CSS file to add styles: add the tiled background image (you'll find the image in the images directory) and set the color of the pills navigation buttons to match the rest of the page.
  7. Check your work with both a desktop and mobile browser.

Challenge

Bootstrap offers more complex navigation components, including a "navbar". Try implementing it on our page:

  1. Check out the Bootstrap docs to find the needed code.
  2. Replace the entire contents of the page's <header> element with a navbar, adding appropriate links.
  3. Optionally, you can use logo.png, an image in the images directory, as a logo at the left of the navbar. If you do add the logo image, you may want to remove class="navbar-brand" from the <a> that wraps the image.)
  4. Test your solution with various viewport widths - note how, at narrows browser widths, the navbar automatically collapses into a component more suited for smaller screens.

The finished page should look something like this on desktop and phone browsers:

Pickup Soccer design screenshots

Solution:

TheBootstrapFramework/Solutions/soccer/index.html


  
    
    
    
    
    
    

    Pickup Soccer

    
    

    
    

    
    
  

  
    

Pickup
Soccer

Spring: Time to Move Outside

With the advent of the nicer weather, most of us recreational soccer players move from indoor games to outdoor, grass fields. Here's a few things to keep in mind as you change from the consistent indoor playing surface to the more unpredictable outside pitch:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Find a game. Now.

Code Explanation:

We add a class container to the <header>, <article>, and <footer> elements, and add a <div class="row"> inside the first two. (The <footer>, because it spans the entire width of the screen, does not need <div class="row"> nor the column-classes elements inside of it.)

We use class="col-md-4" and class="col-md-8" to render the narrower and wider columns, respectively, with a narrower left column and wider right column. We again use the justified pills component for navigation.

Classes hidden-xs hidden-sm display the left-side image only for desktop- or large-desktop-width viewports and img-responsive ensures that the image scales to not exceed its parent element's width. Similarly, classes hidden-xs and visible-xs-block hide and display the top and bottom <h3> elements, respectively.

We style the page with our own soccer.css stylesheet, adding the green background image, setting the font size of the <h1> title, and giving the pills elements a green color.

Challenge Solution:

TheBootstrapFramework/Solutions/soccer-challenge/index.html


  
    
    
    
    
    
    

    Pickup Soccer

    
    

    
    

    
    
  

  
   

Spring: Time to Move Outside

With the advent of the nicer weather, most of us recreational soccer players move from indoor games to outdoor, grass fields. Here's a few things to keep in mind as you change from the consistent indoor playing surface to the more unpredictable outside pitch:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Find a game. Now.

Code Explanation:

We copied the example code from http://getbootstrap.com/components/#navbar and pasted it into the <header> of our page. We used the logo.png logo to brand the navbar and added a few sample links. We left in the "search" element from the sample code (though, of course, in our example it doesn't actually perform a search). The navbar nicely shrinks up for smaller-width viewports!