Bootstrap

 

In this chapter, we explore Bootstrap, a popular front-end framework that is included by default with ASP.NET MVC projects. Bootstrap is a front-end toolkit used to build responsive and modern user interfaces using HTML, CSS, and JavaScript.

Bootstrap was originally created by web developers at Twitter for internal use. It was later released as open-source software and quickly became popular due to its flexibility, ease of use, and responsive design features.

 

Bootstrap allows you to create user interfaces that work seamlessly across:

Large desktop screens

Tablets

Mobile devices

It provides built-in support for responsive design, which automatically adapts layouts based on screen size.

Bootstrap includes ready-made components such as:

Grid-based layouts

Navigation bars

Buttons

Forms

Menus

Alerts, badges, and labels

Carousels and widgets

Typography utilities

Because Bootstrap is built entirely with standard HTML, CSS, and JavaScript, it can be used with any web framework, including ASP.NET MVC.

 

Lets create a new ASP.NET Web Application.

Enter the name of the project, lets say MVCBootstrap and click Ok. You will see the following dialog.

In this dialog, if you select the empty template, you will get an empty web application and there will be no Bootstrap present. There won't be any controllers or any other script files either.

Now select the MVC template and click Ok. When Visual Studio creates this solution, one of the packages that it will download and install into the project will be the Bootstrap NuGet package. You can verify by going to packages.config and you can see the Bootstrap version 3 package.

You can also see the Content folder which contains different css files.

Run this application and you will see the following page.

When this page appears, most of the layout and styling that you see is layout and styling that has been applied by Bootstrap. It includes the navigation bar at the top with the links as well as the display that is advertising ASP.NET. It also includes all of these pieces down about getting started and getting more libraries and web hosting.

If you expand the browser just a little bit more, those will actually lay out side by side and that's part of Bootstrap's responsive design features.

If you look under the content folder, you will find the Bootstrap.css file.

The NuGet package also gives a minified version of that file that's a little bit smaller. Under scripts, you will find Bootstrap.js, that's required for some of the components of Bootstrap.

It does have a dependency on jQuery and fortunately jQuery is also installed in this project and there's a minified version of the Bootstrap JavaScript file.

Now the question is, where are all these added in the application? You might expect, that it would be in the layout template, the layout view for this project which is under View/Shared/_layout.cshtml.

The layout view controls the structure of the UI. Following is the complete code in _layout.cshtml file.

                         @Styles.Render("~/Content/css")      @Scripts.Render("~/bundles/modernizr")          

           @Scripts.Render("~/bundles/jquery")      @Scripts.Render("~/bundles/bootstrap")      @RenderSection("scripts", required: false)  

In the above code there are two things to note. First at the top, after