Twitter Bootstrap with ASP.NET MVC 4

In my earlier article I’ve explained my first experiment on implementing and using Bootstrap with ASP.NET Web Forms.

In this article I’m giving the step by step process of creating my first web application having Bootstrap with ASP.NET MVC 4.

Tools and frameworks used:

• Visual Studio Express 2012 for Web.
• Dot Net Framework 4.5.
• MVC 4.
• Bootstrap for MVC 4 NuGet package.

Steps for creating Bootstrap with ASP.NET MVC 4 web application:

1. Launch Visual Studio.
2. Go to File menu and select New Project…
3. Create a new ASP.NET MVC 4 Web Application project.
   
4. Go to Solution Explorer –> right-click the project and select Manage NuGet Packages.
5. In the Manage Nuget Packages screen, select Online from the left panel, Then NuGet official Package source underneath and search for Bootstrap MVC.
6. From the search result list in the center panel, select Bootstrap for MVC 4.
7. Click the Install button to install Bootstrap for MVC 4.
   
8. After the installation process completes check the content folder and the script folder in the solution. The bootstrap CSS and script files will be available.
   
9. In the solution explorer, right-click the Shared folder, select Add, select New Item… and create new MVC 4 Layout Page (Razor). Rename the layout page if you want.
   
10. Edit the new layout page and add the below two lines of code below the tag in header section.

    @Styles.Render("~/Content/bootstrap.min.css")
    @Styles.Render("~/Content/bootstrap-responsive.min.css")
    

11. Remove everything in the body tag and add the below code inside the body tag. This code is to create a container with 12 columns. You have to specify the container column size as span12. Then split the main container into two one with 3 columns (span3) for the left navigation section. The remaining column span (span9) for the contents.

    </pre>
    <div>
    <div class="container">
    <div class="row-fluid">
    <div class="span12">
    <div class="page-header"></pre>
    </pre>
    </pre>
    <h1>Hello.. My tec Bits</h1>
    <pre>
    
    
    <pre>
    
    
    <pre>
    </div>
    
    
    </div>
    
    
    </div>
    
    
    
    
    <div class="row-fluid">
    
    
    <div class="span3">
    
    
    <ul class="nav nav-list">
    
    
    <li class="nav-header">Navigation</li>
    
    
    
    
    <li class="active"><a href="#">ASP.Net</a></li>
    
    
    
    
    <li><a href="#">Java</a></li>
    
    
    
    
    <li><a href="#">VB.Net</a></li>
    
    
    
    
    <li><a href="#">c#</a></li>
    
    
    </ul>
    
    
    </div>
    
    
    
    
    <div class="span9"></pre>
    </pre>
    </pre>
    <div>@RenderSection("featured", required: false)</div>
    <pre>
    
    
    <pre>
    
    
    <pre></pre>
    </pre>
    </pre>
    <div>@RenderBody()</div>
    <pre>
    
    
    <pre>
    
    
    <pre>
    </div>
    
    
    </div>
    
    
    </div>
    
    
    </div>
    
    
    
    
    <pre>
    @Scripts.Render("~/bundles/bootstrap.min.js")
    

12. The new Layout page looks like this:
    
    
13. Open the _ViewStart.cshtml page and change the layout page to the newly created layout page.
    
14. Now build the MVC solution either by hitting the F5 key or by clicking the green build arrow at the Visual Studio tool bar. On successful build, the web page will be launched in the browser similar to the one shown below.
    

See the article Twitter Bootstrap with ASP.NET Web Forms for step by step details on creating a AP.NET web forms website using Bootstrap as the user interface.