Need CSS Change in ViewLayout - Bootstrap 4

Question

I am trying to get to practicing with React in ASP.NET. However, I noticed that the latest Bootstrap 4 doesn't appear to come with the same navbar classes after doing some research, which results in the following screen below when I run my project and reach the Index file:

In light of the fact that CSS has changed with Bootstrap 4, would anyone have suggestions in changing the Layout page so that I can render with that CSS?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ReactASP.NET Application</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" media="all" type="text"/>
    <link href="~/Content/Site.css" rel="stylesheet" media="all" />
    @RenderSection("head", required: false)
</head>
<body>
    <div class="navbar navbar-dark fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("React Example", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/modernizr-2.8.3.js"></script>
    <script src="~/Scripts/jquery-3.3.1.js" media="all"></script>
    <script src="~/Scripts/bootstrap.js" media="all"></script>
    <script src="~/Scripts/popper.js"></script>

    <script src="~/Scripts/popper-utils.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Side note: I tried following directions at the following page, but to no avail.

https://medium.com/@ashwinigupta/how-to-migrate-from-bootstrap-3-template-to-4-in-asp-net-core-application-7da01a1acf99

score 0 · Answer 1 · answered Sep 16 '18 at 00:13

0

replace your button.navbar-toggle with:

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

If I remember correctly that was the only thing that I changed when I went from bootstrap 3 to bootstrap 4.

answered Sep 16 '18 at 00:13

Not even a button! This is nuts. Maybe I need to just stick with Bootstrap 3. Or get into Bootstrap 4 customization - but I was thinking maybe I should avoid that yak shaving... – Kieran Ojakangas Sep 16 '18 at 00:31
There must be additional problems with your navbar. The change I suggested for button.navbar-toggle is necessary but apparently not sufficient. – Sep 16 '18 at 01:23
I'd like to post code here. Maybe I should setup a Fiddle or something and link you. – Kieran Ojakangas Sep 16 '18 at 01:26
I fairly recently converted a Bootstrap 3 navbar to a Bootstrap 4 navbar and the only change I recalled was the button.navbar-toggle was no longer supported and replaced with a button.navbar-toggler. I may have made other changes but I don't remember, sorry. – Sep 16 '18 at 01:32
Your jsfiddle seems to be infinitely looping on something. – Sep 16 '18 at 01:36
Hmmmmm... I noticed it takes a minute to load. But it does load eventually. I can confirm that moving back to Bootstrap 3.3.7 on my laptop brings the familiar screen back, even tho the hamburger dropdown is missing – Kieran Ojakangas Sep 16 '18 at 01:40
It has been more than a minute and still hasn't loaded. – Sep 16 '18 at 01:48
It loaded for me when I waited over a minute... but that could be because it was cached to my browser. – Kieran Ojakangas Sep 16 '18 at 01:50
I don't think the problem is with the navbar itself. Anyway the jsfiddle still hasn't loaded - I do have a slow machine but I think there is something wrong with your code. – Sep 16 '18 at 01:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180129/discussion-between-kieran-ojakangas-and-b68c). – Kieran Ojakangas Sep 16 '18 at 01:56

score 0 · Answer 2 · answered Sep 16 '18 at 00:15

The easiest way of solving your navbar problem is to follow the official navbar docs and build it from scratch. Since it's a small component, it should not take much time. One thing that I notice is that you use the navbar class with a div. Try using it with a nav tag.

This is a very simple example:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  @Html.ActionLink("React Example", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Hey thanks, I know you have a valid point with matching up CSS from ground up. The thing is, I'm surprised that my screen looks as bland as it does, even after I tried both the CSS you suggested along with B68C's. I wonder if it would be better for me to jump back to Bootstrap 3 or something. Wish I could share the current screen with you, even though it doesn't look that different... — Kieran Ojakangas, Sep 16 '18 at 00:30
@KieranOjakangas we can solve this. One thing I didn't ask was, which exact version of bootstrap are you using? is it a package? bootstrap's cdn? you downloaded bootstrap and add it to your site manually? Bootstrap changed some things, but the transition shouldn't be hard enough. — c-chavez, Sep 16 '18 at 08:09
Hey there, I used the NuGet package manager to download the latest Bootstrap. You were right in the fact that I was using the wrong HTML syntax for sure, it also appears I didn't understand a thing about the dropdown menu button - it's supposed to only appear when the window is small enough by design. I'll post an answer like this soon, but thanks for being willing to help! On a side note, I can't inject @Html.React into my Layout view... would you know why? — Kieran Ojakangas, Sep 16 '18 at 20:58

Need CSS Change in ViewLayout - Bootstrap 4

2 Answers2