Skip to main content

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.
Back to top