Layout Creation using Bootstrap Template & ASP.Net MVC

After doing lots of browsing and rejection you finally was able to freeze on a UI theme for the application.

wholescreen

Now it’s time to put this layout in a new asp.net mvc application.

Step 1: Let us follow a golden rule of Break the Screen into logical pieces

breakscreen

Step 2: Let us get to the project and make some folder structure in the shared folder inside view (Application Presentation Layer > Views > Shared ). Here we have added a new folder name OtherLayouts (You can name it as you please)

folderstructure

Step 3: Let us use the new folder to have partial views of each broken code (Application Presentation Layer > Views > Shared > OtherLayouts)

codeinfolder

Step 4: Now open the _Layout.cshtml and map the partial views in the code

layout-mapping

Step5: Add the static CSS and JS files directly in the header of the _Layout.cshtml file.

Download the Files and Put in a new ASP.Net MVC Project and try yourself

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s