Easy way to design application layout by bootstrap theme

To design layout of your web site is much more cumbersome. But you can easily design your website layout by bootstrap, you can make it responsive also.

Step 1: Create a ASP.NET MVC application with empty template

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Empty Template and Razor as view engine

Step 2: Install required packages
Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package bootstrap

Step 3: Download bootstrap theme
Go to http://bootswatch.com/ . Download any theme (bootstrap.css) like below and pest the content in Contents -> bootstrap-main-theme.css file

download-bootstrap.css

Step 4: Create a Layout page
Create a _Layout.cshtml in Views->Shared folder and add the following references.

_Layout.cshtml






    Bootstrap theme test
    
    
    
    



   
    
@RenderBody()

Step 5: Create HomeController and index view
Create HomeController and create index view. Right click on index action of home controller you will see index.cshtml file created in Views->Home folder. Modify the index.cshtml file like following

Index.cshtml

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

Home Page

Step 6: Add Navigation bar

If you go the preview of the theme you will see some sample code or documentation. You can customize later. To add navigation bar to the website I modify the _Layout.cshtml like following.

_Layout.cshtml





    Bootstrap theme test
    
    
    
    



    

    
@RenderBody()

Now run the application, you will get a nice layout. Thanks for your patient!

Some other bootstrap theme sites which may help you.