Html and Css that I created outside ASP.NET doesn't fit when I add it in ASP.NET CORE Razor

Question

I created the html and css for My Profile page and when I added that html and css in ASP.NET CORE it looks different.

This is how it looks when I open it from index.html

And when I added it in ASP cshtml along with styles.css

Some differences in cshtml:

1. Save Changes button is not exactly where it should be
2. The Dashboard header is center aligned
3. Dashboard boxes are in different places and different widths(I used bootstrap row and columns to fit them)
4. There is no space between Login Details,Dashboard and Reservations

What can be the reason for this?

Answer 1

The problem is that I had an reference to an different bootstrap version library in the layout file.

This one: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />

and the version of bootstrap I used for my html was 5.0.0, so I just removed the reference to bootstrap in layout and I added the new one: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

It's working now.