Bootstrap/C2/Introduction-to-Bootstrap/English - Revision history

Nancyvarkey at 08:31, 4 March 2021

2021-03-04T08:31:47Z

Nehasolanki at 13:12, 18 February 2021

2021-02-18T13:12:03Z

Nehasolanki at 13:05, 18 February 2021

2021-02-18T13:05:08Z

Nehasolanki: Created page with "'''Title of the script: '''Introduction to Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Bo..."

2021-02-18T13:01:24Z

Created page with "'''Title of the script: '''Introduction to Bootstrap '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske '''Novice Reviewer:''' Abhijit Bonik '''Keywords: '''Bo..."

New page

'''Title of the script: '''Introduction to Bootstrap

'''Author:''' Neha Solanki

'''Domain Reviewer: '''Ankita Maske

'''Novice Reviewer:''' Abhijit Bonik

'''Keywords: '''Bootstrap,''' '''CSS, HTML, Webpage, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, Download Bootstrap, Compiled CSS and JS, CDN link, bootstrap.css

{| border="1"
|-
| | '''Visual Cue'''
| | '''Narration'''
|-
| | Slide: Title
| | Welcome to the spoken tutorial on '''“Introduction to Bootstrap”.'''
|-
| | Slide 2:

Learning Objectives
| | In this tutorial, we will learn how to:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

|-
| | Slide 3:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''Bootstrap 4.6.0'''
* '''HTML5'''
* '''CSS3'''
* '''gedit Text Editor'''
* '''Firefox web browser '''and
* '''A working Internet connection '''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
| | Slide 4: Prerequisite

https://spoken-tutorial.org
| |
* To follow this tutorial, you should be familiar with '''HTML''' and '''CSS'''
* If not, please go through the '''HTML '''and''' CSS '''tutorials on this '''website'''.

|-
| | Open web browser and type[https://developer.android.com/studio/ ]https://getbootstrap.com/
| | Open your '''web browser''' and type the '''URL''' as shown here.

Make sure you’ve an active '''internet connection'''.
|-
| | [Firefox]

Click on the '''Download button '''at the top right corner of the page
| | Click on the '''Download '''button''' '''at the top right corner of the page.

'''Download webpage''' opens.
|-
| | [Firefox]

Select v4.6.x
| | At the right corner, we can see the version of '''Bootstrap'''.

Click on it to expand the list and select '''v4.6.x'''.
|-
| | '''Introduction''' webpage
| | Introduction webpage opens.
|-
| | [Firefox]

On the left panel >> click on''' Download'''
| | On the left panel, click on the''' Download link'''.
|-
| | Highlight - Compiled CSS and JS
| | Let us now download the ready-to-use '''compiled code '''for '''Bootstrap'''.

Go to the section''' “Compiled CSS and JS”.'''
|-
| | Highlight the version Bootstrap v4.6.0
| | The latest '''stable''' version at the time of recording this tutorial is '''Bootstrap v4.6.0.'''

It may vary in future.
|-
| | Click '''Download '''button
| | Click on the''' Download '''button.
|-
| |

Narration only
| | Please note: Some '''web browsers''' may download automatically.

Some may display a '''Save as''' dialog box.
|-
| | Click on Save File button
| | In the '''Save as''' dialog box, click on the '''Save File''' option and then on the '''Ok''' button.
|-
| | Only Narration
| | The download''' '''may take some time depending upon your '''Internet '''connection'''.'''
|-
| | Go to the '''Downloads '''folder >> Point to the downloaded file
| | Go to the '''Downloads '''folder where the ready-to-use '''compiled '''code file is saved.
|-
| | Right-click bootstrap zip file>> select '''Extract to'''
| | Right-click this file and select '''Extract to.'''
|-
| | Select Desktop
| | Now choose the desired location on your machine to save this file.

I’ll select '''Desktop'''.
|-
| | Create Folder →My-bootstrap
| | Then create a new folder with the help of the “'''Create Folder'''” button.

Name it as '''My hyphen bootstrap'''.

This folder will help to organize all our '''Bootstrap''' files in a single location on our machine.
|-
| | Click on Select
| | Click on '''Select.'''

The file is extracted now.
|-
| | Open Desktop → My-bootstrap folder >> double-click to open
| | Let us check the extracted file.

Go to the '''Desktop''' folder and open the folder '''My hyphen bootstrap.'''

The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder.

'''Bootstrap''' '''compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
|-
| | Bootstrap-4.6.0-dist>>Double-click to open
| | Open this folder.

Inside it there are two folders: '''CSS''' and '''JS'''.

These folders contain ready-to-use '''compiled''' and minified '''CSS''' files and '''JavaScript plugins'''.
|-
| | Go to the My-bootstrap folder
| | Go to the '''My-bootstrap''' folder.
|-
| | Point to Mypage.html in My-bootstrap folder
| | I have saved another file named '''Mypage.html''' in this folder.
|-
| | Slide 5: Code Files
| |
* The file used in this tutorial is available in the '''Code Files''' link on this tutorial page.
* Please download and extract it.
* Make a copy and then use it while practising.

|-
| | Right-click >> Select '''Open With Firefox'''

File opens
| | Let us open the file '''Mypage.html''' in a '''web browser.'''

So, right-click on the '''HTML''' file and select any '''web browser''' of your choice.

I will choose '''Firefox'''.

The '''HTML''' file opens in the '''Firefox web browser'''.
|-
| | Highlight the background
| | This is a simple '''HTML webpage''' without '''Bootstrap.'''

Now let’s include '''Bootstrap '''in this''' HTML webpage''' and see the change.
|-
| |
| | Let us open the''' Mypage.html''' file in any '''text editor'''.
|-
| | Go to '''My-bootstrap '''folder
| | Right-click on the '''HTML''' file and select '''Open With Other Application '''option.
|-
| | Select '''Open With gedit'''
| | Then choose any '''text editor''' that is available.

I will choose '''gedit'''.
|-
| | [gedit - Mypage.html]

Highlight:

<meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no">
| | Inside the <'''head>''' section, always include the '''viewpoint''' '''<meta> tag''' as shown here.

This helps to ensure proper rendering and touch zooming on mobile devices.
|-
| | [gedit - Mypage.html]

Type:

<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">

Highlight the code
| | Next to the '''viewpoint''' '''<meta> tag, '''type the code as shown.

This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file.

Note that the '''HTML''' file and the '''bootstrap-4.6.0-dist''' folder should be in the same folder.
|-
| | [gedit - Mypage.html]

Highlight:

bootstrap.css
| | '''bootstrap.css''' is a default code file that is provided by '''Bootstrap'''.
|-
| | [gedit - Mypage.html]

Type:

<nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
| | Inside the '''<h1>''' tag, add the '''class''' as shown here.
|-
| | [gedit - Mypage.html]

Highlight:

class="text-warning"
| | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the color of the text to yellow.

We will learn more about this '''class''' in upcoming tutorials later on.
|-
| | Press Ctrl + S
| | Save the file.
|-
| | Switch to firefox
| | Switch to the '''browser '''and refresh the page.
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The text has changed to yellow colour.

The '''font''' is also changed to '''Bootstrap’s''' default font.

So now, we have successfully created a '''webpage''' with '''Bootstrap.'''

We’ll be using this method i.e '''Download Bootstrap''' in this course.
|-
| | Open bootstrap.css in gedit.

Highlight the code: Font, text, background
| | Let us see the '''ready-to-use compiled code '''for''' Bootstrap '''files.

Go to the '''bootstrap-4.6.0-dist''' folder.

Double-click on the '''CSS''' folder and then the '''bootstrap.css''' file.

All the required '''classes''' are '''defined''' in this file.

For eg. '''Font classes''', text color '''classes''', background color '''classes,''' etc.

When we '''link''' this file in our '''HTML''' code, we get access to these '''inbuilt classes'''.

Let’s close the file.
|-
| |
| | Now let’s learn about the second way to use '''Bootstrap '''on a '''webpage'''.
|-
| | Slide: Bootstrap from CDN link
| |
* '''Content Delivery Network (CDN)''' links are used to include '''Bootstrap''' in a '''webpage.'''
* It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file.
* It reduces the loading time.
* '''Webpages''' with '''CDN '''link always require '''internet connection'''

|-
| | Open web browser and switch to Bootstrap website tab
| | Go to the '''Bootstrap website '''once again.
|-
| | [Firefox-getbootstrap]
| | Scroll down and go to the''' jsDelivr''' section.

Here you can see two '''links'''.

These '''links''' are for '''cached''' versions of '''Bootstrap’s compiled CSS''' and '''JS'''.
|-
| | [Firefox-getbootstrap]

Copy:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Copy these two '''links.'''
|-
| | Switch to Mypage.html
| | Switch to the '''Mypage.html '''file.
|-
| | [gedit - Mypage.html]

Delete:

<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">
| | First delete this line which we have added earlier.

|-
| | [gedit - Mypage.html]

Paste:

<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
| | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' link.

|-
| | [gedit - Mypage.html]

Update:

<h1 class="text-primary"> Bharat Mart </h1>

Highlight:

class="text-primary"
| | Inside the '''<h1>''' tag, update the '''class''' as “'''text-primary'''”

This '''class''' changes the color of the text to blue.
|-
| | [gedit - Mypage.html]

| | This '''class''' is defined in the '''cached''' version of '''Bootstrap CSS''' code file.
|-
| | Press Ctrl + Shift + S
| | Save this file as “'''Mypage-cdn.html'''” in the '''My-bootstrap''' folder.
|-
| | Go to My-bootstrap folder
| | Open the “'''Mypage-cdn.html'''” file in a '''web browser'''.

I will open it in '''Firefox.'''
|-
| | [Firefox - Grocery Store]

Highlight the output
| | Observe the output.

The color of the text is changed to blue.

We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''.
|-
| | Only narration
| | With this we have come to the end of this tutorial.

Let us now summarize.
|-
| | Slide : Summary

| | In this tutorial, we have learnt:

* Download and use '''Bootstrap''' version '''4.6.0 '''and
* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link

|-
| | Slide : Assignment
| | As an assignment-

* Open the '''Mypage.html''' file and change the '''class''' to '''text-danger'''.
* Save the file.
* Observe the output on the '''web browser'''.

|-
| | Slide :

About Spoken Tutorial project
| | The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
| | Slide : Spoken Tutorial Workshops
| | The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
| | Slide :

Answers for THIS Spoken Tutorial
| | Do you have questions in THIS Spoken Tutorial?

Please visit this site.

Choose the minute and second where you have the question

Explain your question briefly

The Spoken Tutorial project will ensure an answer

You will have to register to ask questions
|-
| | Slide :

Forum for specific questions:

| | The Spoken Tutorial forum is for specific questions on this tutorial.

Please do not post unrelated and general questions on them.

This will help reduce the clutter.

With less clutter, we can use these discussions as instructional material.
|-
| | Slide : Acknowledgement
| | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
|-
| | Slide : Thanks
| | This is Neha Solanki from Spoken Tutorial, IIT Bombay signing off.

Thanks for watching.
|-
|}

@@ Line 25: / Line 25: @@
 * Download and use '''Bootstrap''' version '''4.6.0 '''and
-* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link
+* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN link'''
 |-
@@ Line 40: / Line 40: @@
 * '''gedit Text Editor'''
 * '''Firefox web browser '''and
-* '''A working Internet connection '''
+* A working '''Internet connection '''
 However you may use any other '''editor''' or '''browser''' of your choice.
@@ Line 60: / Line 60: @@
 Click on the '''Download button '''at the top right corner of the page
-|  | Click on the '''Download '''button''' '''at the top right corner of the page.
+|  | Click on the '''Download '''button at the top right corner of the page.
 '''Download webpage''' opens.
@@ Line 72: / Line 72: @@
 |-
 |  | '''Introduction''' webpage
-|  | Introduction webpage opens.
+|  | '''Introduction web page''' opens.
 |-
 |  | [Firefox]
@@ Line 103: / Line 103: @@
 |-
 |  | Only Narration
-|  | The download''' '''may take some time depending upon your '''Internet '''connection'''.'''
+|  | The download may take some time depending upon your '''Internet connection'''.
 |-
 |  | Go to the '''Downloads '''folder >> Point to the downloaded file
@@ Line 135: / Line 135: @@
 The files are extracted into the '''bootstrap hyphen 4.6.0 hyphen dist''' folder.
-'''Bootstrap''' '''compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
+'''Bootstrap compiled code''' can be downloaded and extracted in the similar manner in '''Windows OS.'''
 |-
 |  | Bootstrap-4.6.0-dist>>Double-click to open
@@ Line 189: / Line 189: @@
 <meta name="viewport" content="width=device-width, <br>initial-scale=1, shrink-to-fit=no">
-|  | Inside the <'''head>''' section, always include the '''viewpoint''' '''<meta> tag''' as shown here.
+|  | Inside the <'''head>''' section, always include the '''viewpoint <meta> tag''' as shown here.
-This helps to ensure proper rendering and touch zooming on mobile devices.
+This helps to ensure proper '''rendering''' and '''touch zoom'''ing on mobile devices.
 |-
 |  | [gedit - Mypage.html]
@@ Line 200: / Line 200: @@
 Highlight the code
-|  | Next to the '''viewpoint''' '''<meta> tag, '''type the code as shown.
+|  | Next to the '''viewpoint <meta> tag, '''type the code as shown.
 This will '''link''' the '''bootstrap.css''' file to '''Mypage.html''' file.
@@ Line 225: / Line 225: @@
 class="text-warning"
-|  | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the color of the text to yellow.
+|  | This '''class''' is defined in '''Bootstrap CSS''' code file and it changes the colour of the text to yellow.
 We will learn more about this '''class''' in upcoming tutorials later on.
@@ Line 242: / Line 242: @@
 The text has changed to yellow colour.
-The '''font''' is also changed to '''Bootstrap’s''' default font.
+The '''font''' is also changed to '''Bootstrap’s''' default '''font'''.
 So now, we have successfully created a '''webpage''' with '''Bootstrap.'''
@@ Line 251: / Line 251: @@
 Highlight the code: Font, text, background
-|  | Let us see the '''ready-to-use compiled code '''for''' Bootstrap '''files.
+|  | Let us see the ready-to-use '''compiled code '''for''' Bootstrap '''files.
 Go to the '''bootstrap-4.6.0-dist''' folder.
@@ Line 270: / Line 270: @@
 |  | Slide: Bootstrap from CDN link
 |  |
-* '''Content Delivery Network (CDN)''' links are used to include '''Bootstrap''' in a '''webpage.'''
+* '''Content Delivery Network (CDN) links''' are used to include '''Bootstrap''' in a '''webpage.'''
 * It delivers a '''cached''' version of '''Bootstrap’s compiled CSS''' and '''JS '''to the file.
 * It reduces the loading time.
-* '''Webpages''' with '''CDN '''link always require '''internet connection'''
+* '''Webpages''' with '''CDN link''' always require '''internet connection'''
 |-
@@ Line 313: / Line 313: @@
 <script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
-|  | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN''' link.
+|  | Now paste these two '''links''' here as we are using '''Bootstrap''' from '''CDN link'''.
 |-
@@ Line 325: / Line 325: @@
 class="text-primary"
-|  | Inside the '''<nowiki><h1></nowiki>''' tag, update the '''class''' as “'''text-primary'''”
+|  | Inside the '''<nowiki><h1></nowiki> tag''', update the '''class''' as “'''text-primary'''”
-This '''class''' changes the color of the text to blue.
+This '''class''' changes the colour of the text to blue.
 |-
 |  | [gedit - Mypage.html]
@@ Line 346: / Line 346: @@
 |  | Observe the output.
-The color of the text is changed to blue.
+The colour of the text is changed to blue.
 We have successfully created a '''webpage''' with '''Bootstrap''' using '''CDN link'''.
@@ Line 360: / Line 360: @@
 * Download and use '''Bootstrap''' version '''4.6.0 '''and
-* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN '''link
+* Include '''Bootstrap''' version '''4.6.0 '''from '''CDN link'''
 |-

@@ Line 290: / Line 290: @@
 Copy:
-<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">
+<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0n<br>PEzvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" <br>crossorigin="anonymous">
 <script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>
@@ Line 302: / Line 302: @@
 Delete:
-<link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.css">
+<link rel="stylesheet" <br>href="bootstrap-4.6.0-dist/css/bootstrap.css">
 |  | First delete this line which we have added earlier.
@@ Line 310: / Line 310: @@
 Paste:
-<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPE<br>zvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" crossorigin="anonymous">
+<link rel="stylesheet" <br>href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <br>integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0n<br>PEzvF6L/Z6nronJ3oU<br>OFUFpCjEUQouq2+l" <br>crossorigin="anonymous">
 <script src=<br>"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" <br>integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09R<br>mUpJ8jgGtD7zP9<br>yug3goQfGII0yAns" crossorigin="anonymous"></script>

@@ Line 218: / Line 218: @@
 <nowiki><h1 class="text-warning"> Bharat Mart </h1></nowiki>
-|  | Inside the '''<h1>''' tag, add the '''class''' as shown here.
+|  | Inside the '''<nowiki><h1></nowiki>''' tag, add the '''class''' as shown here.
 |-
 |  | [gedit - Mypage.html]
@@ Line 320: / Line 320: @@
 Update:
-<h1 class="text-primary"> Bharat Mart </h1>
+<nowiki><h1 class="text-primary"> Bharat Mart </h1></nowiki>
 Highlight:
 class="text-primary"
-|  | Inside the '''<h1>''' tag, update the '''class''' as “'''text-primary'''”
+|  | Inside the '''<nowiki><h1></nowiki>''' tag, update the '''class''' as “'''text-primary'''”
 This '''class''' changes the color of the text to blue.