Skip to content
Matthew Adams By Matthew Adams Co-Founder
Example Responsive Layout Using Bootstrap

In my previous post, we listed a few learnings from our experience of using Bootstrap as a layout engine in an HTML5 website.

In this post, I've put together a basic example that illustrates some of the techniques we talked about.

Power BI Weekly is a collation of the week's top news and articles from the Power BI ecosystem, all presented to you in one, handy newsletter!

I've structured a page with a header; left-hand sidebar; body content with a call-out box and an image that breaks out of the grid structure; and a full-width footer.

Azure Weekly is a summary of the week's top Microsoft Azure news from AI to Availability Zones. Keep on top of all the latest Azure developments!

The footer uses a fairly standard wrapper technique to ensure that it is pushed to the bottom of the window regardless of the overall length of the content, and the items in the footer are pulled left and right.

I'm not showing you how to use any of the bootstrap components or Javascript elements - this is just illustrating the basic grid layout/CSS. So, I've not shown how to use their navigation components, for example - we might have a look at them another time.

If you play with it in a relatively modern browser, you should see it size up and down from phone to wide desktop, adjusting the font sizes, layout and typography as it goes. Even if you're on IE7 (shudder) you should see a tolerable experience.

The Introduction to Rx.NET 2nd Edition (2024) Book, by Ian Griffiths & Lee Campbell, is now available to download for FREE.

There's one particularly interesting part of the site.css - it contains what I'd call a "missing" part of the bootstrap responsive styling. There is a break point that starts at 980px and finishes at 1199px that comes under the general label of "desktop", as does 1199px and above. I've added some CSS to let you show or hide elements within that specific range.

/* -----------------------------------------------
    Extra hidden/visible classes
----------------------------------------------- */

.visible-narrow-desktop {
  display: none !important;
}

@media (min-width: 980px) and (max-width: 1199px) {
  .visible-narrow-desktop {
    display: inherit !important;
  }
  .hidden-narrow-desktop {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-narrow-desktop {
    display: inherit !important;
  }
  .visible-narrow-desktop {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

Matthew Adams

Co-Founder

Matthew Adams

Matthew was CTO of a venture-backed technology start-up in the UK & US for 10 years, and is now the co-founder of endjin, which provides technology strategy, experience and development services to its customers who are seeking to take advantage of Microsoft Azure and the Cloud.