Navbar fits to screen even after using .container class from bootstrap in Asp.Net MVC 5

Question

I am a beginner in ASP.NET MVC.

I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.

I want my navbar to be in the default size that .container class sets its content into.

If you refer the _Layout.cshtml script, you will see that the @RenderBody() is used to render the contents present in the body.

But the output of it is not what I expected. Why could this be happening?

_Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>@ViewBag.Title - BBC Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Links to other CSS-->
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/mdb.css" rel="stylesheet" />
    <link href="~/Content/mdb.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>

<body>
    <!--Navigation Bar-->
    <nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
        <!--Navbar toggle button-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--Logo-->
        <a class="navbar-brand" href="#">
            <img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
        </a>
        <!--Links-->
        <div class="collapse navbar-collapse" id="nav-content">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Home</a>
                </li>
                <li class="divider-vertical">
                </li>
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">About Us</a>
                </li>
                <li class="divider-vertical">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Contact</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Login</a>
                </li>
                <li class="divider-vertical">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Register</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer class="footer">
            <div class="container">
                <span class="text-muted">&copy; Copyright 2017 Big Boy Cars @DateTime.Now </span>
            </div>
        </footer>
    </div>

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/mdb.js"></script>
    <script src="~/Scripts/mdb.min.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>

Index.cshtml:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title - Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/mdb.css" rel="stylesheet" />
    <link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="MyCarousel" data-slide-to="0" class="active"></li>
                <li data-target="MyCarousel" data-slide-to="1"></li>
                <li data-target="MyCarousel" data-slide-to="2"></li>
            </ol>
            <!--Slides-->
            <div class="carousel-inner z-depth-1" role="listbox">
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Big Boy Cars</h3>
                    <p>Best car dealers in market</p>
                </div>
                <!--First Slide-->
                <div class="carousel-item active">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Second Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Third Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
            </div>
            <!--Controls-->
            <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/mdb.js"></script>
    <script src="~/Scripts/mdb.min.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
</body>
</html>

Mario Lopez · Accepted Answer · 2017-10-22T10:43:37.817

Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.

So your Index.cshtml should be:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

        <div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="MyCarousel" data-slide-to="0" class="active"></li>
                <li data-target="MyCarousel" data-slide-to="1"></li>
                <li data-target="MyCarousel" data-slide-to="2"></li>
            </ol>
            <!--Slides-->
            <div class="carousel-inner z-depth-1" role="listbox">
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Big Boy Cars</h3>
                    <p>Best car dealers in market</p>
                </div>
                <!--First Slide-->
                <div class="carousel-item active">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Second Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Third Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
            </div>
            <!--Controls-->
            <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

EDIT

In regards to the navbar. You have to wrap it in a .container:

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   ..
  </nav>
</div>

It's on the docs

The actual problem is with the navbar my friend. I don't want the navbar to fit to the screen size. I want it to be within the container width. I can't figure out at which point I am wrong. — Sanish Kokkodan, Oct 22 '17 at 10:19
That worked! I spend 2 days searching for it on the web and couldn't find it's solution. Thank you so much friend! :) — Sanish Kokkodan, Oct 22 '17 at 14:59

Navbar fits to screen even after using .container class from bootstrap in Asp.Net MVC 5

1 Answers1