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


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


    Bootstrap theme test


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


    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.


    Bootstrap theme test



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

Some other bootstrap theme sites which may help you.

[wpdm_file id=44]

2 thoughts on “Easy way to design application layout by bootstrap theme

Leave a Reply

Your email address will not be published. Required fields are marked *