CODEWITHSUNDEEP
c#htmlcssasp.net-mvc-4
suman
suman

Reputation: 728

Layout in _layout.cshtml in ASP.NET MVC

I want to have a layout having three container: left container , central container and right container in the _layout page.I tried with the following code but it dosen't respond with the expected result.

<body>
        <header>
            @Html.Partial("_header")
        </header>       

         <div class="row">

             <div class="col-lg-4 well">
                 hello there lcont
                 @RenderBody()
             </div>

             <div class="col-lg-4 well" >
                  Central container
             </div>

             <div class="col-lg-4 well ">
                 right container
             </div>


         </div>



        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>

Instead of getting three divs side by side in a single row i get three different rows.

enter image description here

EDIT

I changed col-lg-4 to col-md-4 and it worked as it is suposed to.Any explanation i am confused.

Upvotes: 0

Views: 2141

Answers (1)

Mat J
Mat J

Reputation: 5632

You'll need to use sections and RenderSection() instead of RenderBody().

In your _Layout.cshtml, render the sections like this,

<div class="row">

    <div class="col-lg-4 well">
        hello there lcont
        @RenderSection("Left")
    </div>

    <div class="lg-col-4 well">
        @RenderSection("Center")
    </div>

    <div class="lg-col-4 well ">
        @RenderSection("Right")
    </div>


</div>

And in each content.cshtml page, divide the section contents like this:

@section Left{
   <span> left content goes here</span> and here
}

@section Center{
   <div> Center content </div>
}

@section Right{
  any html here goes to <aside> Right content </aside>
}

NOTE: If your problem is that divs are coming below each other, make sure you include the bootstrap or relevant css that provide grid system as I see from your use of col-lg-* classes.

Upvotes: 2

Related Questions