Skip to main content

Bootstrap in MVC

Please see my article ‘First MVC Application’ before reading this article because this article is dependent on my previous article.
We will use CSS framework ‘Bootstrap’ in our MVC project. In this article we will learn to install bootstrap package in MVC project. We will add nuget package of Bootstrap.
Bootstrap package has some dependency on popper.js and jQuery. For installing package below are the steps:

1.Click on Tools menu in visual studio and select Nuget Package Manager and after that ‘Package Manager Console’.

2.Write command: install-package jQuery and press enter key. It will install jQuery package in project and add essential files.

3. Now write command: install-package popper.js

4. Now install bootstrap package.

Now required packages are installed. Please see below project structure after packages install:

Now we will import jQuery, popper.js and bootstrap in our Index View. We need to add all page content in a div which has bootstrap class ‘container-fluid’.
If you are not aware with bootstrap css classes then please read about bootstrap first.

Below is the Index view after importing these:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>Welcome to first MVC application</h2>
        </div>
    </div>
</body>
</html>

We have added a class jumbotron to display message. Press F5 and start debugging, we will get below output:

Now you can see , page looks good when bootstrap is applied.
Now we will add bootstrap menu bar for navigation in Index view. Add a nav tag and place all navigation menus inside it. Use class ‘nav-item’ for every menu item and use ‘nav-link’ for every anchor tag. Below is the markup including menu bar:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
        <a class="navbar-brand" href="#">Logixn</a>
        <div class="col-8">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/home/index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/contact">Contact</a>
                </li>

            </ul>
        </div>

    </nav>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>Welcome to first MVC application</h2>
        </div>
    </div>
</body>
</html>

Press F5 and below is the output:

See below menu item :

<li class="nav-item">
   <a class="nav-link" href="/home/index">Home</a>
</li>

Here home is controller and index is action method. When we will click on this link then it will send request to home controller for Index action method.

Now see one more menu item:

<li class="nav-item">
    <a class="nav-link" href="/home/about">About</a>
 </li>

Here home is controller and about is action method. When we will click on this link then it will send request to home controller for About action method.

Now we will add action methods About and Contact in Home controller. Below is the code after adding action methods:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult About()
        {
            return View();
        }
        public ActionResult Contact()
        {
            return View();
        }
    }
}

Now add views for About and Contact action methods (Please see my article ‘First MVC Application’ for steps of adding view):

About View

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
        <a class="navbar-brand" href="#">Logixn</a>
        <div class="col-8">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/home/index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/contact">Contact</a>
                </li>

            </ul>
        </div>

    </nav>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>This is About page</h2>
        </div>
    </div>
</body>
</html>

Contact View

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
        <a class="navbar-brand" href="#">Logixn</a>
        <div class="col-8">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/home/index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/contact">Contact</a>
                </li>

            </ul>
        </div>

    </nav>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>This is Contact page</h2>
        </div>
    </div>
</body>
</html>

Menu bar is added in each view , later we will add menu bar only at one place when we will learn ‘Layout’ page.

Now press F5 and see the output. Click on About link , browser will send request to Home controller for ‘About’ action method and About action method will call About view

Click on Contact link , browser will send request to Home controller for ‘Contact’ action method and Contact action method will call Contact view

In this article we have seen steps for adding bootstrap package in project and adding navigation menu bar.

You can download source code from below URL:

http://contents.logixn.com/projects/mvcapplication.rar

Leave a Reply

Your email address will not be published. Required fields are marked *