First commit to section called 'Responsiveness' (Section number 11).

README.md

@@ -138,6 +138,18 @@ To access it from a mobile device, it doesn't require any specific permissions o
 
 ### 11. Responsiveness
 
+Our web application uses a mobile-friendly design approach to the responsive design of the application's UI elements by using a combination of [Bootstrap](https://getbootstrap.com/) and [Cascading Style Sheets](https://www.w3.org/Style/CSS/Overview.en.html) to ensure a seamless user experience across different devices with varying screen sizes. Bootstrap's CSS framework is used to make the navigation bar intelligently collapse into a toggle-based menu on a smaller screens which maintains the usability of our app and does not sacrifice design integrity of the app. Additionally, our app uses Bootstrap's flexible containers & responsive utility classes in order to arrange site content that dynamically adjusts to the device's viewport (width of the viewable screen area).
+
+The navigation bar is assigned the Bootstrap utility class 'navbar-expand-lg' which controls the visibility of the items within the navigation bar based on screen size. This class is used to adapt the appearance and behaviour of the navigation bar depending on either the device or screen size. All of the options in the navbar except for the link to the 'home' page of the website, are contained within a div that has the classes 'collapse navbar-collapse' which work in conjunction to initially hide the toggle button for displaying the rest of the navbar and collapse the navigation bar's content into a 'hamburger' style button that a user can click on to display the nav bar. A button accompanying the collapsible nav bar is given the class 'navbar-toggler', which styles the button according to Bootstrap's default button style for a navigation bar toggler (which appears as a 'hamburger'-styled button), a 'data-toggle' attribute set to 'collapse' which indicates that the button should trigger the collapse behaviour, a 'data-target' attribute that specifies the ID of the element that will be collapsed or expanded, which in this case points to the ID given to the div containing the data items that should be collapsed or expanded. All of this means that with a reduced screen size, clicking the toggler button triggers the expansion or collapse of the navigation bar content.
+
+A search bar on the index page is contained within three parent divs that have different classes assigned to them, which are 'container mt-5', 'row justify-content-center' and 'col-md-6 navbar-custom'. 'container mt-5' is two classes that first define a fixed-width container that centers the content contained within it, while 'mt-5' applies a top margin to the div that is five times Bootstrap's spacing scale, which prevents the div from being shown too close to the navigation bar. The class 'row' defines a a row in Bootstrap's grid system which consists of a 12-column layout and helps to organise and structure the content within the columns, while 'justify-content-center' is Bootstrap's flexbox utility class that, when applied to a 'row' element, centers the columns horizontally within the row. Next, class 'col-md-6' is part of Bootstrap's grid system and specifies that the column should take upto half of the available width on medium and larger screens, while 'navbar-custom' allows for setting specific styles such as colours to that div. The form element containing the search bar has the class 'form-inline ml-auto'; 'form-inline' makes the input box and button appear on the same line, and 'ml-auto' aligns the form elements to the right side of the parent by applying a Bootstrap- defined margin to the left of the parent div. Coming to the input field, the classes 'form-control custom-input-size' applies a consistent style to all form elements so that they adapt well to different screen sizes and devices, while 'custom-input-size' is defined by us to have a width of 250px to prevent the input field becoming too big to be displayed on a mobile device. A width of 10px to the right using 'margin-right' is also defined for the input field to position the 'Search' button a bit further away. The button has the classes 'btn btn-light my-2 my-sm-0' which first creates a Bootstrap-standard styled button, with 'btn-light' setting the background colour of the button to a light shade, 'my-2' adding a margin of 2 units above and below the button on the vertical axis, and 'my-sm-0' that sets no margin to the top and bottom of the button for small-sized screens 'sm'. All of these class enable the visibility of the form even on small screens without impacting user experience.
+
+Similarly, the div containing the map on the index page is housed inside three divs that each perform some styling operations; the outermost div has the class 'container-fluid' which creates a full-width container that spans the entire viewport and ensures that the container will resize itself when the viewport size decreases, the inner div has the class 'row justify-content-center', and the innermost div has the classes 'col-md-8 mr-4'; 'col-md-8' specifies that the div should take up 8 out of 12 columns on medium-sized 'md' and larger screens, and 'mr-4' sets a margin of 4 units to the right of the 8 columns so as to create space between the current column and the next column. Next, the div containing the map has it's own CSS-based styling, with a 'height' of 500px, 'width' of 100% {to take the whole width of the div housing the map}, 'margin-top' of 30px, 'margin-bottom' of 30px, a 'margin-left' of 10px, and a 'border-radius' of 8px to give the map rounded borders. All of these styles combined make the map resize on smaller devices and leave space for the user to scroll up and down the page by using the space to the right of the map.
+
+When a user clicks on the map, a form having the appearance of a card appears on the webpage, which has five container divs housing the actual form that have Bootstrap styling applied to them; the first div has class 'container-fluid', the second div has class 'row justify-content-center', the third div has class 'col-md-4' which takes up 4 out of 12 columns, the fourth div has class 'card' (this contains the 'cardBody' div that actually contains the form) which is a flexible, extensible container that is designed to display various types of content in an appealing and organised way. With 'cardBody', this class is a building block of a card that allows the form to have some padding outside of it. All of this combines to create a form that usually displays right next to the map, but moves to be placed below the map with a small screen size.
+
+When a user attempts to view their POIs, all of the results are shown in a table with class 'table' that is housed in a div having the id 'poi_table', which is then housed inside a parent div having the custom class called 'custom-table-scrolling'; this div is further housed inside another div with class 'container-fluid'. 'custom-table-scrolling' has an attribute called 'overflow-x' that is set to 'auto', which makes the entire table scrollable horizontally inplace when the table's content becomes too large to display on a small screen. Bootstrap applies its' own styling features to this table, which makes table headers appear larger and in bold font, with appropriate widths given to each column of the table's headers in order to fit the retrieved data. These styling features enable both mobile and PC users to view the entire table by only scrolling it horizontally instead of the whole page, which would have shown empty white space above the table.
+
 ### 12. Geolocation
 
 The geolocation is implemented using the [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). When a user accesses the web application, they are prompted to share their location with the app. If the user chooses to share their location, the Geolocation API retrieves data from the device's GPS hardware, providing accurate latitude and longitude coordinates. These coordinates are then used to display the user's current location on the map. The map is configured using [Leaflet](https://leafletjs.com/), a popular open-source JavaScript library for interactive maps.