Post
Ask Question

Bootstrap For Beginners - Part One (Introduction And Implementation)

Introduction

In this article we will start Bootstrap3, we will learn the fundamentals and features of the latest Bootstrap framework step-by-step. So by using this we can easily create interactive, responsive websites and save a lot of time and effort.



What is Bootstrap?

Bootstrap is the most popular and powerful HTML,CSS, and JavaScript front-end framework for faster and easier use, responsive layout, mobile-first web development. It includes design templates for UI components like Forms, Buttons, Tables, Navigation, Dropdowns, Alerts,Tabs, Accordion, Carousel and many other with optional JavaScript plugins.

Features of Bootstrap

Easy to use: Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.
 
Open Source: Bootstrap is completely free to download and use.

Browser compatibility: Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox,Internet Explorer,Safari,and Opera.
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework.

Responsive features:

By using Bootstrap we can easily create responsive designs for web pages. Bootstrap's responsive CSS makes our web pages appear more appropriately on different devices as it adjusts to phones, tablets, and desktops.
Consistent design:

All Bootstrap components share the same styles and design templates through a central library, so that the designs and layouts of web pages are consistent.

Save lots of time: Using the Bootstrap predefined design templates and classes we can save lots of time and effort.

Where to Get Bootstrap?

There are two ways to get Bootstrap on our own web site.
  • Download Bootstrap.
  • Include Bootstrap from a CDN.
Download Bootstrap

We can download the latest version of Bootstrap. When we click on this link we will see screen like this.



Now if we click on Download Bootstrap button, another page will open like this:



There are two versions available for download, compiled Bootstrap and Bootstrap source files.
  • Download Bootstrap: By clicking on this option, we can download the precompiled and minified versions of Bootstrap CSS,JavaScript,and fonts.
After downloading, we will unzip the folder and we will find the following subfolders inside that.

  • Download Source: By clicing on this option, we can get the latest Bootstrap LESS and JavaScript source code.
For better understanding we'll focus on the compiled Bootstrap files. As the files are complied and minified we don't have to
bother every time including separate files for individual functionality. It will also increase the performance of our website.

Bootstrap CDN:

If we don't want to download, we can include it from a CDN (Content Delivery Network). MaxCDN provide CDN support for Bootstrap's CSS and JavaScript and also include jQuery.We can use Bootstrap CDN links:
  1. <!-- Latest compiled and minified CSS -->  
  2. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  3. <!-- jQuery library -->  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  5. <!-- Latest compiled JavaScript -->  
  6. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
Create First Web Page With Bootstrap:

Example1: Using Download Bootstrap

Now we will create an HTML file that displays "Hello C# Corner" message in our web browser.

Step 1: Creating a Basic HTML file

First we will open any code editor and create a new html file, and we will write the following code and then save file name as "hello.html" on the particuler location. We will include HTML5 doctype at the beginning of the page, with the lang attribute and the correct character set. 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h1>Hello C# Corner</h1>  
  11. </body>  
  12.   
  13. </html>  
Step 2: Bootstrap 3 is mobile-first

Using Bootstrap 3 we will design our HTML page to be responsive to mobile devices. To ensure proper rendering and enable touch zooming,we will add following <meta> tag inside the <head> element.
  1. <meta name="viewport" content="width=device-width,initial-scale=1">  
The width=device-width is used to set the width of the page to follow the screen-width of the device. The initial-scale=1 is used to set the initial zoom level when the page is first loaded by the browser.
Now the code will look like this.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8. </head>  
  9.   
  10. <body>  
  11.     <h1>Hello C# Corner</h1>  
  12. </body>  
  13.   
  14. </html>  
Step 3: Making HTML File a Bootstrap Template

For making this file a Bootstrap Template, after Downloading Bootstrap by the above procedure we will include Bootstrap CSS and JS files. We should include JS files at the bottom of the HTML page before closing <body> tag. by following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10.   
  11. <body>  
  12.     <h1>Hello C# Corner</h1>  
  13.     <script src="js/jquery-2.1.4.min.js"></script>  
  14.     <script src="js/bootstrap.min.js"></script>  
  15. </body>  
  16.   
  17. </html>  
Now we will open the file in a browser by double clicking on it and see the output.

Output:



Example 2:Including Bootstrap's Files using CDN

In this we will create same webpage like Example-1 name as "hello2.html." We just include Bootstrap's Files using CDN, by following code. 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <!-- Latest compiled and minified CSS -->  
  9.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  10. </head>  
  11.   
  12. <body>  
  13.     <h1>Hello C# Corner</h1>  
  14.     <!-- jQuery library -->  
  15.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  16.     <!-- Latest compiled JavaScript -->  
  17.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  18. </body>  
  19.   
  20. </html>  
Now we will open the file in a browser by double clicking on it and seeing the output.

Output:



In this article we focused on Fundamentals of Bootstrap.Then in the next articles we will understand all the components of Bootstrap.
 
Read more articles on Bootstrap:


Similar Articles