Bootstrap like not working properly

[Jason Phang]

I have a bunch of html and css codes that I ran with sublime text. The output was nice like what I wanted. However, when I wanted to use the same way in asp.net, I transfered the codes from my sublime to asp.net, it seems like the asp.net webpage become smaller and certain features like the positioning of the text is quite off.. Am I missing something out? I am sure that the bootstrap is working because when I removed the links, it just showed a white screen. What am I doing wrong? Is there some limitation to what asp.net can do? Like for instance the navbar that is from my html is like this

However, for my asp.net is like this:

The font is much more smaller and i understand that the picture is not there, but the whole layout looks different.

This is my code for the navbar :

    <div id="home">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
            <a class="navbar-brand" href="index.html"><img src="img/w3newbie.png"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#course">Course</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Porfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#team">Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>

This is the css code:

@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

body {
    font-family: 'Lato', sans-serif;
    color: #505962;
    overflow-x: hidden;
}

/*--- Navbar --*/
.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgb(0,0,0) !important;
}

.navbar-brand img {
    height: 2rem;
}

.navbar-nav li {
    padding-right: 0.7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}

    .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover {
        color: green;
    }

When i hover, i do not get the green color as in the code. Is there some bootstrap i am missing that i did not reference? I followed the same links as in my html code.

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/Content/Style.css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

It just looks like the website is much more smaller in asp.net and certain featurs like the hover is not green and the navbar is not so transparent.

 

[Skydiver]

Looks like a HTML and CSS issue to me, and C# is just ancillary involved due to hosting in a C# based web application.

 

[Skydiver]

I don't use Sublime so this question maybe naive: Does sublime use the same browser/renderer as the browser you have configured in Visual Studio when you are testing your site?

Anyway, fire up the F12 dev tools and start inspecting the effective CSS of the various pieces. Is the CSS that you are setting what is actually getting applied? If so, then inspect the computed CSS values as rendered by Sublime vs what is computed by the browser?

 

[Jason Phang]

When I get back from work, I will take a look. I am not sure if tthere is some bootstrap I am not referencing because the asp,net certainly looks smaller compared to the hml website. And certain elements are missing. But I will take a look at what you say and inspect for the css