Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap navigation menu in asp.net core application

Suggested Videos
Part 36 - Why use tag helpers | Text | Slides
Part 37 - ASP.NET Core Image tag helper | Text | Slides
Part 38 - ASP.NET Core Environment Tag Helper | Text | Slides

In this video we will discuss creating a responsive navigation menu in asp.net core application using Bootstrap 4.


On a large screen device the navigation menu should look as shown below.

asp net core bootstrap 4 navbar


On a small screen device the navigation menu should look as shown below.

asp.net core bootstrap 4 navigation bar

Bootstarp 4 has a dependency on jQuery. So please download and install jQuery in your asp.net core application. You can use the Library Manager tool to do this. We discussed Library Manager in Part 34 of ASP.NET Core tutorial.

_Layout.cshtml Code

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <environment include="Development">
        <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/bootstrap/js/bootstrap.js"></script>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"
              asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              asp-suppress-fallback-integrity="true" />
    </environment>

    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>
<body>

    <div class="container">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <a class="navbar-brand" asp-controller="home" asp-action="index">
                <img src="~/images/employees.png" width="30" height="30">
            </a>
            <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" asp-controller="home" asp-action="index">List</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="home" asp-action="create">Create</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div>
            @RenderBody()
        </div>

        @if (IsSectionDefined("Scripts"))
        {
        @RenderSection("Scripts", required: false)
        }
    </div>

</body>
</html>

On a small screen device, for the navbar toggle button to work, jQuery must be loaded before Bootstrap JavaScript file. If you flip the order, the navbar toggle button does not work.

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/lib/jquery/jquery.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>

Please note : For a non-development environment (i.e Staging, Production etc), I have not included the required <link> tags to load jQuery and Bootstrap JavaScript from a CDN. I am leaving that as an exercise for you to do.

Notice how the buttons (View, Edit & Delete) are attached to each other. To include margin between these button use the Bootstrap margin classes (m-1, m-2 etc). In the class name, "m" stands for margin and the number 1,2 etc is the size of the space you want.

bootstrap 4 space between buttons

In index.chtml modify the <a> tags to include "m-1" bootstrap class

<div class="card-footer text-center">
    <a asp-controller="home" asp-action="details"
        asp-route-id="@employee.Id" class="btn btn-primary m-1">View</a>
    <a href="#" class="btn btn-primary m-1">Edit</a>
    <a href="#" class="btn btn-danger m-1">Delete</a>
</div>

asp.net core tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.