A Bootstrap Layout for Jazz Calendar

Contact Us or call 1-877-932-8228
A Bootstrap Layout for Jazz Calendar

A Bootstrap Layout for Jazz Calendar

Let's use Bootstrap to render a new layout for the Jazz Calendar site: we'll use a large background image and slightly-off-to-the-right main content on desktops, and a more straightforward design on phones. Open up TheBootstrapFramework/Demos/jazzcal.html from a browser (and, if possible, from a phone or emulator) and also open the code with an editor to review. Here's the page on a desktop browser:

Bootstrap layout for Jazz Calendar - desktop

On a tablet:

Bootstrap layout for Jazz Calendar - tablet

And on a mobile device:

Bootstrap layout for Jazz Calendar - phone

Notice how the layout changes: we use an offset to position the layout off to the right on wider viewports, lose the offset (but keep the large background image) on tablets, and lose the background image and stack elements vertically on phones. Let's review the code.

Code Sample:


Code Explanation:

As with our first example above, we include the needed CSS and JavaScript files: bootstrap.min.css (referenced in the <head>) and bootstrap.min.js (referenced just before the closing </body> tag, at the bottom of the file) are what make Bootstrap work for our page.

We also include, on line 17, a custom CSS file, jazzcal.css, in which we write our own CSS, specific to the page.

The full-page background image of the saxophone player doesn't come from Bootstrap; rather, it comes from our custom CSS file. jazzcal.css includes the following code:

	html {
		background: url('../images/bg_sax.jpg') no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;

We use a media query to display the background image for viewports of width greater than 768 pixels; narrower viewports don't get the background image.

We also set the font (Georgia) for text on the page, set color for links and some other elements, add some borders, and override the default Bootstrap pills element with some custom colors and borders.

In jazzcal.html, we use Bootstrap grid classes to achieve our desired layout. The <header> (the dark blue element at top), <article> (the main content area), and <footer> (containing the pills navigation) are all classed with container and each contains a <div> of class row.

Inside of each .row element in the <header>, <article>, and <footer>, the content is wrapped in a tag: <div class="col-md-6 col-md-offset-5">. The col-md-6 class sets the element to display, on desktop-sized or larger viewports, as half of its container's width; the col-md-offset-5 class offset - pushes right - the element by 5/12s of the available width. Note that the sum total of the offset and the width don't add up to 12 - we left some space (one twelfth) at the right, for visual effect.

Notice that Bootstrap handles the smaller (tablet- and phone-sized) viewport responsiveness for us: the framework's under-the-hood media queries, tied to the classes we applied, render the layout appropriately for various viewport widths.

We use the visibilty classes to render some elements visible or hidden for specific viewport widths: the <h3 id="tagline" class="hidden-xs">Your local source for local live jazz.</h3> element - because it bears the class hidden-xs in the header - shows for any viewport wider than 768 pixels but is hidden for phones; the <h3> element in the footer, conversely, shows on phones but is hidden for wider viewports, because it has class visible-xs-block. Similarly, we hide the xylophone image for extra-small viewports with class hidden-xs. We also render the xylophone image responsive - to scale with its parent container's width - by applying class img-responsive.

Lastly, we add a "pills" navigation element in the footer: the button links display horizontally on larger viewports, and stacked vertically on phones. We use some custom CSS, in our jazzcal.css file, to adjust the color and borders of the buttons, overriding the default Bootstrap styles.