Description – In this article, we will learn about the basics of bootstrap, its purpose, its usage in visual studio web application.
- Definition of Bootstrap
- Discussion about responsive web application
- Benefits of Responsive website
- Official website walkthrough
- Downloading bootstrap from official website
- Customizing Bootstrap theme
- Integration of Downloaded theme files in the project
- NET web application with Bootstrap demo in Visual Studio
According to the official website of bootstrap, “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”
- What do you mean by responsive website?
The first understanding that comes to a beginner’s mind is ‘Responsive means a website that gives response to a user’. But in actual, responsiveness here means that a website is designed in such a way that it can be used on any platform whether it is a large desktop, laptop, tablet or mobile.
So, in actual, a responsive website is the one which responds to the changing width and height of a device or screen.
Benefits of a responsive website:
- As we all know that in today’s world, all of the business work can be done through a small device like a tablet or a mobile. So it adds an ease to the user to access the website through any device. Thus, increasing the user base and traffic on a website.
- When the user base increases, it also adds to the increase in the business of website and the product sale will also increase.
- Makes it easy for an organisation to analyse the user base and its productivity.
- Increase in the visibility in search engines. This is the major part of success of an organisation.
- Save time and cost on mobile development.
Official Website Walkthrough
In the image above, the navigation bar has many options. I will tell you above each of them.
The above image has some options on right hand side. I will cover them almost all.
You can download bootstrap from the buttons shown in the image above. You can also use CDN to include bootstrap into your application.
What’s included option:
You can see the source code and the files which are available in bootstrap after downloading.
This is just to show you that how Bootstrap team compiles their CSS and JS files.
Basic Template option:
This is just a small example of Bootstrap with Simple HTML.
These are some of the examples of Bootstrap.
I think you should explore the options yourself as they are self-explanatory. In case you need help in understanding any of them, please leave a comment I will reply to it.
Now, CSS option of the Navigation bar of bootstrap site.
It is the complete documentation of the classes of CSS that are used on HTML elements to make them responsive and look them nice. I will use some of these explained classes in my demo which I will discuss in this article. But, I strongly recommend you to read this documentation so that it will be easy for you to understand the demo.
It explains the different styles that can be added to components of HTML like a design to button control, or a design to drop down control etc. So, it is also a part of documentation. You also must read this before proceeding with demo.
Here you can customize you CSS of Bootstrap like colour, border, font size, font style and many more. And at last of this page, there is a compile and download button which will download the Bootstrap files to your local machine.
When you download the file, extract this file and you will see this.
Just copy them in the root directory of your web application.
Demo – In this demo we will create an ASP.NET web application, add some controls to it and give them a look and responsiveness using bootstrap.
Step 1: Create an empty ASP.NET web application. Go to nuget package manager and search for bootstrap and install it in your project.
OR You can just copy the files that you have downloaded from bootstrap’s official website.
Step 2: Add a webform1.aspx to the project.
Step 3: Go to the source of the page and add the references of the following files in the head section of page.
Step 4: Now we will add some HTML to the div tag in the above image.
Step 5: Press Ctrl + F5 to Run without Debug and you will the screen like this.
Explanation of HTML code:
- We have added references to the CSS and JS of Bootstrap that we downloaded in the very start of this tutorial.
- We have also added a Meta tag with device width and initial scale. These values are responsible for the responsiveness of the website. So please be careful that you add this meta tag in the head section.
- Now, the basic concept roams around class in the div These classes and their documentation are available on bootstrap website. So, please refer there. But I will explain the classes that I have used in the above example.
|Container||Bootstrap effects will only be applicable on those elements of HTML who are inside a div having this class|
|Jumbotron||It creates a bix box having some light grey colour|
|Text-center||It aligns the text at center of jumbotron|
|Input-lg||It creates a large input box|
|Btn||It creates a button|
|Btn-lg||It makes the size of button as large|
|Btn-info||It gives a blue color to the button|
|Btn-danger||It gives a red color to the button|
There are many more classes other than these. I only used some basic classes to show this demo. But you should read them from official website’s documentation.
So, finally, we completed our objective and I think from this example you can see the power of bootstrap. I will post more articles in details for using bootstrap. So, please be in touch and share this article as much as you can.
You can also read this article on C-Sharpcorner.com..