DEV Community

Mandar Badve
Mandar Badve

Posted on • Originally published at blog.mandarbadve.com on

Enrich user interface of your web application with Bootstrap UI framework

Bootstrap is very reach UI framework, flexible and responsive. It is made by Twitter and hosted on github.

You can find the more details at http://getbootstrap.com/

Let’s start to integrate this framework into your web application.

Very first you need to download framework files from bootstrap website mentioned above. Download will contain ZIP file (bootstrap-x.x.x-dist.ZIP)

After extracting the downloaded ZIP file, you will get three folders:

  • css: This folder contains style sheets files for the bootstrap framework and theme
  • fonts: This folder contains necessary files for the fonts
  • js: This folder contains JavaScript files for bootstrap framework.

For the further process I have used Visual Studio to create and manage web application. You can use any editor instead of the Visual Studio.

In the Visual Studio go to the menu:  File -> New -> Project. It opens New Project dialog. Select ASP.NET Web Application and give the name for the solution.

Enrich user interface of your web application with Bootstrap UI frameworkClick on OK then Select Empty project type.

select empty project template

Click OK to create project.

You will see solution created as below.

Solution1

Right click on ‘WebAppWithBootstrap’ the solution select Add then select HTML Page.

Solution2Give the name as index.html

Solution3

Index.html file is created opened in editor.

Now add folder ‘Bootstrap’ by right-click on solution and choose Add and then New Folder.

Solution4

Then create two folder called ‘css’ and ‘js’ inside the folder ‘Bootstrap’

Solution5

Now copy the ‘bootstrap.min.css’ file from css file folder of the extracted Bootstrap zip file to the css folder of the solution. Also copy the ‘bootstrap.min.js’ JavaScript file from js folder of the extracted Bootstrap zip file to the js folder of the solution.

Solution6

Now we need to give references of the added css and js file into index.html file as follows.

Solution7

Here we have added meta tag with viewport and set content width=device-width. This made your page responsive.

We have done with the integration of Bootstrap framework with web application.

Now open the page into browser.

Solution8

This post was originally published on blog.mandarbadve.com

Top comments (0)