Basics of Bootstrap

Description – In this article, we will learn about the basics of bootstrap, its purpose, its usage in visual studio web application.

Agenda

  • 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.”

  1. 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

image001

In the image above, the navigation bar has many options. I will tell you above each of them.

Getting Started:

image003

The above image has some options on right hand side. I will cover them almost all.

Download Option:

image005

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:

image007

You can see the source code and the files which are available in bootstrap after downloading.

Compiling CSS and JavaScript option:

image009

This is just to show you that how Bootstrap team compiles their CSS and JS files.

Basic Template option:

image011

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

Examples:

image013

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.

image015

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.

Components

image017

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.

JavaScript

image019

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

Customize

image021

image023

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.

image025

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.

image027

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.

image029

Step 4: Now we will add some HTML to the div tag in the above 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.

image031

Explanation of HTML code:

  1. We have added references to the CSS and JS of Bootstrap that we downloaded in the very start of this tutorial.
  2. 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.
  3. 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.
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 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..

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s