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. Download the "Compiled CSS and JS"

  2. Extract the files in the place they should be stored (css-files in "Content" folder, js-files in "Scripts" folder)

  3. 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>

Last updated