Step by Step Using Bootstrap 3 with ASP.NET MVC 5

What is Bootstrap?

Bootstrap is a well known and one of the most used collections of tools for web application that simplifies creating websites through its incredible built-in languages like Cascading Style Sheet (CSS), HyperText Markup Language(HTML) as well as some optional JavaScript extensions. It is used for icons, forms, typography, buttons, tables, layout grids, and navigation. Bootstrap basically is a front-end open source framework having a collection of tools that contains HTML and CSS-based design templates along with JavaScript to create a responsive design for web applications. Bootstrap provides a base collection including layouts, base CSS, JavaScript widgets, customizable components and plugins.

A Bit About Bootstrap History and Version Details

21^st century is the century of relations in the field of information technology. Many tools are invented that have made this sector easy to learn and progress with very little work. These tools are mostly free and open source which made them accessible by everyone. One of these tools is Bootstrap which brings a new platform to web developers. Bootstrap was developed by Mark Otto and Jacob Thornton and it is originally named as Twitter Blueprint because it is designed at Twitter.

Bootstrap has two major versions, i.e., Bootstrap 2.3.2 and Bootstrap 3. Its version 3.0 provides a new philosophy, i.e., mobile first which is a responsive web design and it can be used for computer monitor as well as mobile phones. Bootstrap is licensed by MIT and it is opened sourced by twitter on August 19, 2011 and can be easily downloaded from GitHub. Now recently, Mark Otto Bootstrap 4 is in development stages and will be in the market with new as well as modified form of tools. It has extraordinary features which makes it unique, that is, it is compatible with many latest versions of web browsers, i.e., Google Chrome, Firefox, Internet Explorer, Opera, and Safari.

Nuget package commands allow ASP.NET users to easily install and use Bootstrap for designing web applications. JavaScript comes in this platform in the form of plugins, i.e., jQuery which is supported on Modal, Dropdown, Scrollspy, Tab, Alert, Popover, Tooltip, Button, Typeahead, Carousel and Collapse.

Let’s follow a step by step approach to learn integrating any Bootstrap theme with ASP.NET MVC application, as we have already covered a little about it in another ASP.NET MVC Tutorial.

Using Bootstrap 3.0 with ASP.NET MVC 5

1. Find any theme that you want to use for your website. In this article, I am using Bootstrap Creative Theme. Follow the URL to find a theme for your website here (https://wrapbootstrap.com/?ref=StartBootstrap):

   

2. Check the live demo of the creative theme which I will implement for ASP.NET MVC application. http://ironsummitmedia.github.io/startbootstrap-creative/
3. Extract the downloaded folder. You will get the files like this:

   

4. Create the ASP.NET MVC Web Application Project in Visual Studio 2013.

   

5. Once you have created the ASP.NET MVC Project, go to the folder where you have downloaded the theme.

   

6. Copy the folders related to CSS (Cascading Style Sheet) to this project in Content folder.

   

7. Similarly, copy the JS folder and include this in the Script folder.

   

8. Now, we need to create the views according to the template. Go to to the theme folder and open the index page in the browser. Our main web layout will be like this:

   

9. Go to view’s shared folder and open _layout.cshtml and comment all the content in it.

   

10. Open theme index file in notepad and copy the content and paste in _layout.cshtml page.

    

11. Collapse the head and other sections in body as follows:

    

12. Remove header and sections which are highlighted from body tag. We will use this for index page and write @RenderBody().

    

13. Expand the head element and set the path of link and href with the path of our project and change href accordingly.

    

14. Change the path accordingly with the jquery reference also and your layout page is ready now.

    

15. Now go to Views, home folder and open index.schtml file and delete all the content in it. Place the code header and sections which we remove from theme’s index file body element.

    

16. Build the project and run. You will get the beautiful theme page for your ASP.NET MVC Web Application.

    

Conclusion

So here we learned step by step how to use any theme in Bootstraps to our ASP.NET MVC web application. And how we can set main layout page and index page. Now, we can add more views accordingly.

More You Must Read about ASP.NET MVC & Related

• Top 10 ASP.NET MVC Interview Questions
• ASP.NET MVC3 Vs MVC4 Vs MVC5 Vs MVC6
• 4 Simple Steps to Create your First ASP.NET MVC5 Application
• Understanding ASP.NET MVC Application Life Cycle
• How to use AJAX in ASP.NET MVC Application?
• Building ASP.NET MVC5 Application with Entity Framework 6
• ViewBag Vs ViewData Vs TempData Vs Session
• All you need to know to pass Exam: 70-486 (Developing ASP.NET MVC Web Applications)
• Free Practical Guide to ASP.NET Web API

The post Step by Step Using Bootstrap 3 with ASP.NET MVC 5 appeared first on Web Development Tutorial.