{"id":2758,"date":"2022-06-11T16:19:50","date_gmt":"2022-06-11T20:19:50","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=2758"},"modified":"2022-06-11T16:23:08","modified_gmt":"2022-06-11T20:23:08","slug":"boostrap-responsive-page-layout-guide","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/boostrap-responsive-page-layout-guide-501916\/","title":{"rendered":"Boostrap 5 Responsive Page Layout Guide"},"content":{"rendered":"

Boostrap is arguably one of the most popular CSS frameworks on the market today1<\/sup>. Originally developed by Twitter2<\/sup>, Boostrap provides market-leading responsive CSS elements used in modern web design. The mobile responsive aspect of Boostrap is powered by the underlying grid system.<\/p>\n

This grid system responds to CSS media queries, adjusting the sizing and positioning of elements to accommodate changes in screen size. In this tutorial, we’ll construct a basic page layout using the Bootstrap grid system that is responsive and optimized for viewing on smartphones, tablets, laptops, and desktops.<\/p>\n

Note<\/strong>: The code for this tutorial is available via Github here<\/a>. A working demo of the final product can be viewed here<\/a>.<\/p>\n

Quick Intro: Boostrap, CSS, HTML, & Prerequisites<\/h2>\n

Boostrap has a lot of features ranging from navigation elements, and tabbed content sections, all the way to JavaScript-powered elements. This tutorial will focus on the bootstrap Grid system and requires no preexisting knowledge.<\/p>\n

Some basic knowledge of HTML, CSS, and development tools will be assumed. If unfamiliar with basic HTML structure, CSS concepts, or running a development server please visit the following resources prior to diving in:<\/p>\n

    \n
  1. MDN HTML 5 Elements Reference<\/a><\/li>\n
  2. MDN CSS Basics<\/a><\/li>\n
  3. NodeJS HTTP Server<\/a><\/li>\n<\/ol>\n

    Regarding point 3, any means of serving an HTML file will suffice. Other options would include an IDE such as Webstorm or VSCode that has that functionality built-in or available via a plugin. This tutorial is intended to be basic, generalizable, and as light on theory and complexity as possible. One can certainly\u00a0survive<\/em> without knowing any of the above in-depth.<\/p>\n

    Project Goals<\/h2>\n

    Before digging in deeply let’s discuss the goals of this tutorial and what to expect. That way you can avoid wasting time if it doesn’t meet your goals. First — this tutorial is slightly opinionated in asserting the type of layout that is created. It will be responsive, use Boostrap V5, and be well-suited for applications like blog posts, articles, or project pages. Below is a visual representation of what our final project will be:<\/p>\n

    \"Responsive<\/a>
    A responsive page layout built using Boostrap V5 containing page elements common to blog and article layouts.<\/figcaption><\/figure>\n

    This would be well-suited to accommodate a blog post, a featured project on a portfolio website, or even perhaps even a product on an e-commerce page. The sidebar element will accommodate “sticky” functionality as will the header. The design will also feature a mobile navigation menu<\/strong> that appears when the screen is below a certain width.<\/p>\n

    Project Setup<\/h2>\n

    This project will be structured like a basic HTML project without the use of any fancy frameworks like React, View, Angular, Django, etc. This project is simple enough that one could<\/em> code this project entirely using Notepad. To get set up we create the following project structure:<\/p>\n

    .\r\n\u2514\u2500\u2500 project\/\r\n    \u251c\u2500\u2500 index.html\r\n    \u2514\u2500\u2500 style.css<\/pre>\n
    The contents of index.html are boilerplate at this point apart from loading style.css<\/code> in the <head><\/code> section. Below are the contents of index.html<\/code>:<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Boostrap Responsive Page Layout<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\"\/>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
    One more component we need is the Boostrap CSS styles. Here we come to our first major design decision. Bootstrap is a framework that has a lot of different components — many of which will not be used here.<\/p>\n
    Adding Bootstrap<\/h2>\n
    Among the many features of Bootstrap come icons, JavaScript, custom utility classes, and even element stylings. These are useful for building an entire set of website features including dropdown menus, hover effects, and other common elements that are chosen on a case-by-case basis.<\/p>\n
    We are only going to use two discrete components of Boostrap, taken from the Official Boostrap Github Repository:<\/a><\/p>\n
      \n
    1. boostrap.grid.min.css<\/code> – the core grid layout CSS styles, pre-compiled and minified.<\/li>\n
    2. boostrap-reboot.min.css<\/code> – basic HTML\/CSS page resets to normalize visual presentation across different browsers.<\/li>\n<\/ol>\n
      Our project directory now reflects the following structure:<\/p>\n
      .\r\n\u2514\u2500\u2500 project\/\r\n    \u251c\u2500\u2500 index.html\r\n    \u251c\u2500\u2500 style.css\r\n    \u251c\u2500\u2500 bootstrap-grid.min.css\r\n    \u2514\u2500\u2500 bootstrap-reboot.min.css<\/pre>\n
      The index.html<\/code> file is now updated to load these as such:<\/p>\n
      <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Boostrap Responsive Page Layout<\/title>\r\n    <link rel=\"stylesheet\" href=\"boostrap-reboot.min.css\" type=\"text\/css\"\/>\r\n    <link rel=\"stylesheet\" href=\"boostrap.grid.min.css\" type=\"text\/css\"\/>\r\n    <link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\"\/>\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
      Notice we have added two <link><\/code> elements in the head section. These need to be included before the link to style.css<\/code> since that file will contain custom CSS definitions that are dependent on Bootstrap styles.<\/strong><\/p>\n
      Adding HTML Elements<\/h2>\n
      This project focuses on creating an opinionated set of basic HTML5 elements that are styled using the Boostrap CSS framework. These elements, combined with Boostrap’s grid framework, will provide us with a page containing sections common to popular layout designs. Below is a generalized tree diagram of the layout we will design:<\/p>\n
      .\r\n\u2514\u2500\u2500 html\/\r\n    \u251c\u2500\u2500 head\r\n    \u2514\u2500\u2500 body\/\r\n        \u251c\u2500\u2500 header\r\n        \u251c\u2500\u2500 main\/\r\n        \u2502   \u251c\u2500\u2500 section (masthead)\r\n        \u2502   \u2514\u2500\u2500 section (main content)\/\r\n        \u2502       \u251c\u2500\u2500 article\r\n        \u2502       \u2514\u2500\u2500 sidebar\r\n        \u251c\u2500\u2500 prefooter\r\n        \u251c\u2500\u2500 footer\r\n        \u2514\u2500\u2500 subfooter<\/pre>\n
      This project will reflect minimal content being added as our focus is on the structure. However, without some\u00a0basic\u00a0<\/em>content and styling, we’ll only ever see a blank white screen. We will add some CSS variables (custom parameters), hard-code some element height values, and provide some basic aesthetics such as border and background colors to visualize our HTML elements. We’ll limit all these to the vibes<\/code> class applied to thebody<\/code> element so we can easily toggle them on\/off. Below is the initial HTML code for our design:<\/p>\n
      <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n    <title>alphaweb - A Bootstrap Template<\/title>\r\n    <link rel=\"stylesheet\" href=\"boostrap-reboot.min.css\" type=\"text\/css\"\/>\r\n    <link rel=\"stylesheet\" href=\"boostrap.grid.min.css\" type=\"text\/css\"\/>\r\n    <link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\"\/>\r\n  <\/head>\r\n  <body class=\"vibes\">\r\n\r\n    <!-- main nav bar area -->\r\n    <header>\r\n\r\n      <!-- Desktop\/Laptop Menu -->\r\n      <nav id=\"mainNav\" class=\"container-fluid navbar\"><\/nav>\r\n\r\n      <!-- Mobile\/Tablet Menu -->\r\n      <nav id=\"mobileNav\" class=\"container-fluid navbar\"><\/nav>\r\n    <\/header>\r\n\r\n    <!-- primary content area -->\r\n    <div class=\"page-wrapper\">\r\n      <main>\r\n\r\n        <!-- Masthead -->\r\n        <section class=\"container-fluid\">\r\n          <div id=\"masthead\" class=\"container\"><\/div>\r\n        <\/section>\r\n\r\n        <!-- Primary Content Area -->\r\n        <section id=\"mainContent\" class=\"container-fluid\">\r\n          <div class=\"container\">\r\n            <div class=\"row\">\r\n\r\n              <!-- Sidebar -->\r\n              <aside id=\"sidebar\" class=\"col-md-3 order-2\"><\/aside>\r\n\r\n              <!-- article\/content -->\r\n              <article id=\"content\" class=\"col-md-9 order-1\"><\/article>\r\n\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n      <\/main>\r\n\r\n\r\n      <!-- Footer Areas -->\r\n      <div class=\"footer-wrapper\">\r\n\r\n        <!-- Prefooter -->\r\n        <section id=\"prefooter\" class=\"container-fluid\"><\/section>\r\n\r\n        <!-- Footer -->\r\n        <footer class=\"container-fluid\">\r\n\r\n          <!-- footer menu area -->\r\n          <div id=\"footerPrimary\" class=\"container\">\r\n          <\/div>\r\n\r\n          <!-- subfooter menu area -->\r\n          <div id=\"subFooter\" class=\"container\">\r\n          <\/div>\r\n\r\n        <\/footer>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n
      I’m going to let the code speak for itself for the most part. However, let’s discuss some of the more opinionated design decisions:<\/p>\n
        \n
      1. section<\/code> elements: These could easily be div<\/code> elements instead.<\/li>\n
      2. main<\/code>: not required; simply used to indicate the main section of content on the bad exclusive of the header<\/code> and footer<\/code> areas<\/li>\n
      3. page-wrapper<\/code>: this is something we’ll use use CSS to stick the footer to the bottom of the page.<\/li>\n
      4. footer<\/code>: This element is wrapped up along with another section<\/code> element (#prefooter<\/code>) into a “wrapper” div<\/code> to allow us to force the entire footer\/prefooter elements to the bottom of the page (a.k.a. sticky footer)<\/li>\n
      5. aside<\/code>: The sidebar could as easily be a div<\/code> element. The aside<\/code> element generally expresses content that’s not the primary focus of the page.<\/li>\n
      6. article<\/code>: Perhaps not relevant for all pages; this element conveys this area is the main unique content on the page. Also not required.<\/li>\n
      7. nav<\/code> elements for the desktop and mobile menu are only parent containers currently — we will add structure and functionality later.<\/li>\n<\/ol>\n
        The use of the elements in such a way is common in my experience but certainly not necessary. These elements, as well as their respective hierarchical ordering, allowing robust control over how they display across varying device widths.<\/p>\n
        Adding CSS Styling<\/h2>\n
        Our HTML layout is off to a good start but the entire page will still render blank white if launched in a browser. To fix this, we’ll add some basic CSS styling. Our styles fall into one of two categories:<\/p>\n
          \n
        1. Essential for page layout and functionality;<\/li>\n
        2. Solely for aesthetic and demonstrative purposes.<\/li>\n<\/ol>\n
          First, let us consider the core CSS code that’s added to ensure the elements display as intended. The code below illustrates this and is commented where relevant:<\/p>\n
          \/** Force footer to bottom of page **\/\r\nbody {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n.footer-wrapper {\r\n    margin-top: auto;\r\n}\r\n.page-wrapper {\r\n    margin-top: var(--alpha-header);\r\n    min-height: calc(100vh - var(--alpha-header));\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\/** Defines the height and stickiness of navbar **\/\r\n.navbar {\r\n    height: var(--alpha-header);\r\n    position: fixed;\r\n    padding: 1rem 0;\r\n    align-items: center;\r\n    display: flex;\r\n}\r\n\r\n\/** controls which navbar to show based on screen width **\/\r\n@media screen and (min-width: 768px) {\r\n    #mobileNav {\r\n        display: none;\r\n    }\r\n}\r\n@media screen and (max-width: 767px) {\r\n    #mainNav {\r\n        display: none;\r\n    }\r\n}<\/pre>\n
          The @media<\/code> queries are used to show\/hide the mobile and desktop navigation menus based on screen width. The header’s styling ensures the navigation bar — be it mobile or desktop — stays positioned at the top of the page. The .footer-wrapper<\/code> styles ensure the footer<\/code> and prefooter<\/code> sections stay at the bottom of the page. Check out this article<\/a> for more options there. The following styles are used only for demonstration purposes and can be eliminated by removing the vibes<\/code> class from the body<\/code> element:<\/p>\n
          :root {\r\n    --alpha-blue: #546699;\r\n    --alpha-yellow: #fee355;\r\n    --alpha-grey: #c0bfbf;\r\n    --alpha-aqua: #58bdbd;\r\n    --alpha-purple: #868cb3;\r\n    --alpha-red: #d06233;\r\n    --alpha-green: #519943;\r\n    --alpha-unit: 32px;\r\n    --alpha-header: calc(3 * var(--alpha-unit));\r\n}\r\n\/** demo styling **\/\r\nbody.vibes footer, body.vibes aside, body.vibes article, body.vibes header, body.vibes #prefooter,\r\nbody.vibes #masthead, body.vibes body, body.vibes #mainNav, body.vibes #mobileNav {\r\n    -webkit-box-shadow: inset 0px 0px 0px 4px #000;\r\n    -moz-box-shadow: inset 0px 0px 0px 4px #000;\r\n    box-shadow: inset 0px 0px 0px 4px #000;\r\n}\r\nbody.vibes body {\r\n    background: var(--alpha-grey);\r\n}\r\nbody.vibes header {\r\n    background-color: var(--alpha-aqua);\r\n}\r\nbody.vibes #masthead {\r\n    background-color: var(--alpha-yellow);\r\n    height: calc(8 * var(--alpha-unit));\r\n    justify-content: center;\r\n    text-align: center;\r\n}\r\nbody.vibes #content {\r\n    background-color: var(--alpha-blue);\r\n    height: calc(24 * var(--alpha-unit));\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\nbody.vibes #sidebar {\r\n    background: var(--alpha-purple);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    text-align: center;\r\n    min-height: 300px;\r\n}\r\nbody.vibes #prefooter {\r\n    background: var(--alpha-red);\r\n    justify-content: center;\r\n    text-align: center;\r\n    min-height: 192px;\r\n}\r\nbody.vibes footer {\r\n    background: var(--alpha-green);\r\n    min-height: 300px;\r\n}\r\nbody.vibes #mainNav {\r\n    background: var(--alpha-green);\r\n}\r\nbody.vibes #mobileNav {\r\n    background: var(--alpha-red);\r\n}<\/pre>\n
          With the HTML from our previous section, and the CSS for our structure and aesthetic styling, we now have a design that looks as such:<\/p>\n
          \"alphaweb<\/a>
          An action sequence showing the design elements and their state changes during screen size changes<\/figcaption><\/figure>\n
          Other than an odd lack of content, we can see a fully-responsive website template in action here. A few things to note:<\/p>\n
            \n
          1. The green section on the bottom\u00a0stays<\/em> on the bottom even if the main content (the purple\/blue section) is less than the full height of the screen.<\/li>\n
          2. The navbar changes from green to red\/orange when the screen size has been reduced below a certain width threshold, defined by Boostrap.<\/li>\n
          3. The purple\/light blue section representing the sidebar collapses underneath the main content such that the sidebar is shown\u00a0after<\/em> the article<\/code><\/li>\n<\/ol>\n
            Adding Essential Functionality<\/h2>\n
            We will now start adding in some elements essential to many websites regardless of specialization. That’s to say — whether one is designing with eCommerce, SaaS, Blogging, or even Web Application development in mind some common elements will be useful. Among these, we will prioritize the following:<\/p>\n