Layout in _layout.cshtml in ASP.NET MVC

Question

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.

<divs> are block elements, so that's the default. You need to style the elements to get the layout out you want. Refer simple fiddle here using floats and width — user3559349
– user3559349, Commented Sep 14, 2014 at 10:31
I have used the bootstrap and according to bootstrap it is supposed to have 3 container in a row side by side each occuping the equal width — suman
– suman, Commented Sep 14, 2014 at 10:45
Would have been useful to have mentioned that in your question. Have you included the relevant bootstrap .css files? — user3559349
– user3559349, Commented Sep 14, 2014 at 10:48
And the first div has class col-lg-4 and the other 2 have lg-col-4 Is that correct? — user3559349
– user3559349, Commented Sep 14, 2014 at 10:50
The use of col-lg-2 signified the bootstrap is being used.Yes all the required files are appended — suman
– suman, Commented Sep 14, 2014 at 10:51

Mat J · Accepted Answer · 2014-09-14 10:30:22Z

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.

Collectives™ on Stack Overflow

Layout in _layout.cshtml in ASP.NET MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related