Bootstrap/C2/Overview-of-Bootstrap/English

VISUAL CUE	NARRATION
Slide1: Title	Welcome to the Spoken Tutorial on “Overview of Bootstrap”.
Slide 2: Learning Objectives	In this tutorial we will learn about, Bootstrap Features of Bootstrap The content available in various tutorials under this series
Slide 3: System Requirements	This tutorial is recorded using, Ubuntu Linux OS v 18.04
Slide 4: Prerequisite https://spoken-tutorial.org	To follow this tutorial, you should have basic knowledge of HTML CSS If not, please go through the relevant spoken tutorials on this website.
Slide 5: About Bootstrap	About Bootstrap: Bootstrap is an open-source and front-end framework. It includes CSS and HTML based designs. It is useful for easy and fast web development. It creates responsive web pages which automatically adjust as per screen size.
Slide 6: Features of Bootstrap	Features of Bootstrap: Time saving: It has predefined design templates and classes which help save time. Responsive property: It easily creates responsive web pages. Easy to use: Basic knowledge of HTML and CSS are required. Open-source: It is freely available. Browser compatibility: It is compatible with all modern web browsers. Javascript Plugins:There are numerous JavaScript plugins bundled in the Bootstrap package.
Slide 7: Note	Note: Bootstrap 4 does not support Internet Explorer 9 and lower versions. Bootstrap 3 is used for them. In this course, we will use Bootstrap 4.
Slide 8: Who can use Bootstrap?	Bootstrap can be used by Web designers Web developers and Software developers
	Now, we will briefly go through the individual tutorials in this series.
Slide 9: “Introduction to Bootstrap”.	The first tutorial in this series is “Introduction to Bootstrap”. In this tutorial, we will learn to Download and use Bootstrap version 4.6.0 and Include Bootstrap version 4.6.0 from CDN link
Show “Introduction to Bootstrap”	Here is a glimpse of the tutorial.
Slide 10: Containers in Bootstrap	The next tutorial is “Containers in Bootstrap”. It explains about Containers Breakpoints and Types of container classes such as .container .container-fluid .container-breakpoint
Show “Containers in Bootstrap”	Let’s have a brief look at this tutorial.
Slide 11: Grid System in Bootstrap	The next tutorial is “Grid System in Bootstrap” Here, we will learn about: Row class Column class Column class with breakpoints 12 Column class 12 Column class with breakpoints
Show “Grid System in Bootstrap”	Here is a glimpse of the tutorial.
Slide 12: Order and Offset classes in Bootstrap	The next tutorial is “Order and Offset classes in Bootstrap”. In this tutorial, we will learn about: Order classes and Offset classes while designing a layout.
Show “Order and Offset classes in Bootstrap”.	Here is a glimpse of the tutorial.
Slide 13: Margin and Padding Classes in Bootstrap	The next tutorial will explain “Margin and Padding Classes in Bootstrap”. In this tutorial, we will learn about Margin classes and Padding classes while designing a layout.
Show “Margin and Padding Classes in Bootstrap”.	Let's have a look at this tutorial.
Slide 14: “Horizontal and Vertical Alignment Classes in Bootstrap”	The next tutorial is “Horizontal and Vertical Alignment Classes in Bootstrap” Here, we will learn how to use: Horizontal alignment classes and Vertical alignment classes for aligning columns in a row.
Show “Horizontal and Vertical Alignment Classes in Bootstrap”	Here is a glimpse of the tutorial.
Slide 15: Typography in Bootstrap	The next tutorial is “Typography in Bootstrap”. In this tutorial, we will learn how to use: Text Alignment Text Transform Font Weight and Italic Text Decoration Reset Color and Display headings for styling and formatting text in Bootstrap.
Show “Typography in Bootstrap”.	Here is a glimpse of the tutorial.
Slide 16: “Color Classes in Bootstrap”.	The next tutorial is “Color Classes in Bootstrap”. Here, we will learn about color classes for: Borders Text Links and Background
Show “Color Classes in Bootstrap”	Let’s have a brief look at this tutorial.
	All the above topics are covered under the Basic level. Next comes the Intermediate level tutorials.
Slide 17:“Forms in Bootstrap”.	The first tutorial in the Intermediate level is “Forms in Bootstrap”. In this tutorial, we will learn about: Form controls Help text Sizing Read-only plain text Checkboxes and radio buttons and File inputs
Show “Forms in Bootstrap”.	Here is a glimpse of the tutorial.
Slide: 18: Input Group and Button in Bootstrap	Next tutorial is “Input Group and Button in Bootstrap”. Input group Input group sizing Button Button classes Outline button classes Disabled state button and Button sizes
Show Input Group and Button in Bootstrap”.	Let’s have a brief look at this tutorial.
Slide 19: “Inline Forms in Bootstrap”.	The next tutorial is “Inline Forms in Bootstrap”. In this tutorial, we will learn about: Block level buttons and Inline forms
Show “Inline Forms in Bootstrap”.	Here is a glimpse of the tutorial.
Slide 20: “Nav and Navbar in Bootstrap”.	The next two tutorials are “Nav and Navbar in Bootstrap”. Here, we will learn about: Navigation Navigation - methods Horizontal alignment Tabs and pills Fill and justify and Collapsible navbar
Show “ Nav and Navbar in Bootstrap”.	Here is a glimpse of the tutorial.
Slide 21: Dropdowns in Bootstrap”	The next tutorial is “Dropdowns in Bootstrap”. In this tutorial, we will learn about: Dropdowns Dropdown classes Dropdown divider Dropdown position
Show “Dropdowns in Bootstrap”	Let’s have a brief look at this tutorial.
Slide 22:List Group in Bootstrap”.	The next tutorial is “List Group in Bootstrap”. Here, we will learn about: List group Active and disabled item List group with links and buttons and Contextual classes
Show List Group in Bootstrap”.	Here is a glimpse of the tutorial.
Slide 23: Alert and Badge in Bootstrap”.	The next tutorial is “Alert and Badge in Bootstrap”. In this tutorial, we will learn about: Alert and its classes Badge and its classes Badge as label Badge as counter and Badge pill
Show Alert and Badge in Bootstrap”.	Let’s have a brief look at this tutorial.
Slide 24: Jumbotron and Breadcrumb in Bootstrap”.	The last tutorial in this series is Jumbotron and Breadcrumb in Bootstrap”. In this tutorial, we will learn about: Jumbotron and Breadcrumb Here, we will display the contents such as heading, paragraph, etc. using Jumbotron.In the Login page, we will add breadcrumb such as Home/Login.
Show Jumbotron and Breadcrumb in Bootstrap”.	Here is a glimpse of the tutorial.
	With this we have come to the end of this tutorial. Let us now summarize.
Slide 25: Summary	In this tutorial, we have learnt: Bootstrap Features of Bootstrap and The content available in various tutorials under this series
Slide 26: About Spoken Tutorial project	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it
Slide 27: Spoken Tutorial Workshops	The Spoken Tutorial Project team: conducts workshops using spoken tutorials and gives certificates on passing online tests. For more details, please write to us.
Slide 28: 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 29 : 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 30:Acknowledgement	Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
Slide 31 : Thanks	This is Nirmala Venkat from spoken tutorial project signing off. Thanks for watching.

Contributors and Content Editors

Nirmala Venkat