# Design Material

## General information

"Design Material" refers to the resources used for the presentation of the data, i.e. the layout. These resources are coded in HTML, CSS or JavaScript and are used in the View files of a project.  

## Bootstrap 4

Bootstrap 4 is one of the latest versions of Bootstrap, which is a framework for developing responsive front end solutions by providing templates based on HTML, CSS and JavaScript. One of the main differences to its previous version is that it uses a flexbox layout by default instead of a float-based grid layout, which makes it easier to create responsive and flexible grid layouts. It also includes a variety of pre-designed components, such as forms, buttons, and navigation menus, that can be used to quickly build responsive layouts.

For more information: <https://getbootstrap.com/docs/5.0/getting-started/introduction/>

## Benefits of Bootstrap 4

We are using Bootstrap 4 for many reasons:

* the installation is easy (see below)
* it is open-source, so no need to pay anything
* it enables a responsive design which means that the layout automatically adjusts to different screen sizes and devices, so that we do not have to prepare a layout for different cases
* the variety of features and plugins it provides saves time and effort since we do not have to program them from scratch on our own

## Installation

1. Go to <https://getbootstrap.com/docs/4.0/getting-started/download/>
2. Download the "Compiled CSS and JS"
3. Extract the files in the place they should be stored (css-files in "Content" folder, js-files in "Scripts" folder)
4. Add the following two lines of code in the "Layout.cshtml" file of the project:

```
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
```

```
<script type="text/javascript" src="~/Scripts/bootstrap.bundle.min.js"></script>
```

Make sure that the following two lines\*\*\* come before the bootstrap js-file line to be able to use JavaScript plugins from Bootstrap:

```
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aeudoc.gitbook.io/developer/presentation/design-material.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.