What is Bootstrap?
A bit about Bootstrap History and Version Details
21st century is the century of relations in the field of information technology. Many tools are invented that has made this sector easy to learn and progress with a 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 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.
- A. We can’t make a public method as non action in ASP.NET MVC.
- B. Make return type void to a public method.
- C. Add VoidAttribute attribute to a public method.
- D. Add NonActionAttribute attribute to a public method.
For a complete online test and Practice Exams on Web Technologies, Click Here.
Correct Answer: D
Let’s follow a step by step approach to learn integrating any Bootstrap theme with ASP.NET MVC Application, as we already have covered a little about it in another ASP.NET MVC Tutorial.
Using Bootstrap 3.0 with ASP.NET MVC 5
- 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):
- Check the live demo of creative theme which I will implement for ASP.NET MVC application.
- Extract the downloaded folder you will get the files like this:
- Create the ASP.NET MVC Web Application Project in Visual Studio 2013.
- Once you have created the ASP.NET MVC Project go to the folder where you have downloaded the theme.
- Copy the folders related to CSS (Cascading Style Sheet) to this project in Content folder.
- Similarly copy the JS folder and include this in the Script folder.
- Now we need to create the views according to the template. Go to to the theme folder and open the index page in browser. Our main web layout will be like this.
- Go to view’s shared folder and open _layout.cshtml and comment all the content in it.
- Open theme index file in notepad and copy the content and paste in _layout.cshtml page.
- Collapse the head and other sections in body as follows:
- Remove header and sections which is highlighted from body tag we will use this for index page and write @RenderBody().
- Expand the head element and set the path of link and href with the path of our project and change href accordingly.
- Change the path accordingly with the jquery reference also and your layout page is ready now.
- 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.
- Build the project and run. You will get the beautiful theme page for your ASP.NET MVC Web Application.
So here we learn step by step how we can 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.
Following are the section details of this online course:
- Section 1: Getting Started With Bootstrap
- Section 2: Photo App Sales Website
- Section 3: Portfolio Resume Using SASS
- Section 4: Social Network Template
- Section 5: Agency Landing Page Using LESS
- Section 6: Photo Gallery
- Section 7: CMS Admin Template
- Section 8: Web Hosting Company Website
- Section 9: Ecommerce Template
- Section 10: Business Bootstrap Theme
- Section 11: Blog Website
- Section 12: Course Summary
More You Must Read about ASP.NET MVC & Related
- Top 15 Bootstrap Interview Questions – A MUST HAVE
- 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