Layout & Structure
Grid
Bootstrap Grid System
Purpose: Content should support responsive design and should be organized in a visually harmonious way, using Bootstrap
- Use Bootstrap’s .container class for fixed-width or .container-fluid class for full-width to wrap the page content.
- Use .row class to create horizontal groups of columns helping the management of gutters between columns and .col-* classes to control the layout across different breakpoints. Use predefined column classes ensuring that columns add up to 12 per row at each breakpoint for proper alignment.
- Ensure that all developers and designers adhere to these guidelines when implementing the layout using Bootstrap’s grid
system. - Ensure that any custom modifications to the Bootstrap grid system are applied without altering the recommendations in this guideline.
Header
Purpose: Create a clear, engaging entry point for users that includes branding, navigation elements, language switcher and other essential tools (like search or contact button).
- Position the logo in a prominent and consistent location (top-left) and ensure the header follows the visual identity with proper
spacing and colors. - Integrate the main navigation and other key utilities like search icon or contact button.
- The header components should adapt for smaller screens (e.g. hamburger menu for navigation).
- Ensure all interactive elements remain accessible and readable on all devices and are keyboard navigable.
- Header should be sticky to ensure smooth user experience and easy access to navigation while scrolling the page.
Footer
Purpose: Provide a space for secondary information, additional navigation, legal disclaimers, and contact details.