Bootstrap/C2/Introduction-to-Bootstrap/English
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
| 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:
|
| Slide 3:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
| Slide 4: Prerequisite |
|
| Open web browser and type[1]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 web page 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 |
|
| 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, |
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" 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: <h1 class="text-warning"> Bharat Mart </h1> |
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 colour 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 |
|
| 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" <script src= |
Copy these two links. |
| Switch to Mypage.html | Switch to the Mypage.html file. |
| [gedit - Mypage.html]
Delete: <link rel="stylesheet" |
First delete this line which we have added earlier. |
| [gedit - Mypage.html]
Paste: <link rel="stylesheet" <script src= |
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 colour 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 colour 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:
|
| Slide : Assignment | As an assignment-
|
| 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. |
