# 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 <span style="color: rgb(224, 62, 45);">.container</span> class for fixed-width or <span style="color: rgb(224, 62, 45);">.container-fluid</span> class for full-width to wrap the page content.
- Use <span style="color: rgb(224, 62, 45);">.row</span> class to create horizontal groups of columns helping the management of gutters between columns and <span style="color: rgb(224, 62, 45);">.col-\*</span> 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.

- Footer should be divided into clearly defined sections (e.g., About, Legal, Contact, Social Media, Copyright, etc) having critical links (privacy policies, contact info) easily locatable.
- Footer should be adapted well on small screens with collapsing sections into accordions if necessary.
- Include necessary legal information (e.g. accessibility statements, privacy policies)

**[Layout &amp; Structure Document](https://guidelines.risa.gov.rw/attachments/87)**