Basics of Bootstrap

Agenda

• Definition of Bootstrap
• Discussion about responsive web applications
• Benefits of Responsive website
• Official website walkthrough
• Downloading Bootstrap from official website
• Customizing Bootstrap theme
• Integration of downloaded theme files in the project
• ASP.NET web application with Bootstrap demo in Visual Studio

According to the official Bootstrap website, "Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile first projects on the web.".

Responsive websites

The first understanding of Responsive websites that comes to a beginner's mind is responsive means a website that responds to a user. But actually, 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 a responsive website actually is one that responds to the changing width and height of a device or screen.

Benefits of a responsive website

• We all know that in today's world, all of the business work can be done using a small device like a tablet or a mobile. So it makes it easier for the user to access the website using a 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 the 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 the 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.

Getting Started



The preceding image has some options on the right hand side. I will cover them nearly all.

Download Option



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 that are available in Bootstrap after downloading.

Compiling CSS and JavaScript option



This is just to show you how the Bootstrap team compiles their CSS and JavaScript files.

Basic Template option



This is just a small example of Bootstrap with Simple HTML.

Examples



These are some of the examples of Bootstrap.

I think you should explore the options yourself since they are self-explanatory. In case you need help in understanding any of them, please leave a comment and I will reply to it.

Now for the CSS option of the Navigation bar of the Bootstrap site.



It is the complete documentation of the CSS classes used on HTML elements to make them responsive and look nice. I will use some of these explained classes in my demo that explains in this article. But, I strongly recommend you read this documentation so that it will be easy for you to understand the demo.

Components



It explains the various styles that can be added to components of HTML like a design to button control, or a design to drop down control and so on. So, it is also a part of documentation. You also must read this before proceeding with the demo.

JavaScript



These are the various JavaScript functions that we can use to create some effects in HTML controls. This is not necessary in this demo but is necessary if you wish to implement JavaScript animations and other effects.

Customize





Here you can customize you CSS of Bootstrap like colour, border, font size, font style and many more. And at the bottom of this page, there is a compile and download button that 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 to 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 provide them a look and responsive using Bootstrap.

Step 1

Create an empty ASP.NET web application. Go to the 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 the page.



Step 4

Now we will add some HTML to the div tag in the preceding image.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BootstrapDemo.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="jumbotron text-center">
            <h1>
                Welcome to Bootstrap Demo
            </h1>
            <h2>
                Tutorial by Ankit Bansal
            </h2>
        </div>
        <div>
            <p>
                This is the basic example showing Bootstrap Effects
            </p>
        </div>
        <div>
            <div>
                <input id="Text1" type="text" class="input-lg" placeholder="Enter your name here.." />
            </div>
            <br />
            <div class="btn btn-lg btn-danger">
                Click here to confirm
            </div>
            <div class="btn btn-lg btn-info">
                Click here to cancel
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Step 5

Press Ctrl + F5 to Run without Debug and you will the screen like this.



Explanation of HTML code

1. We have added references to the CSS and JavaScript of Bootstrap that we downloaded in the very start of this tutorial.
   
   
2. We have also added a Meta tag with a 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.
   
   
3. Now, the basic concept involves the class in the div tag. These classes and their documentation are available on the Bootstrap website. So, please refer to there. But I will explain the classes that I have used in the preceding example.

Class	Purpose
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 the 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 my personal website and blog.