Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible
alert messages.

Bootstrap 5 Jumbotron

a big padded box for calling extra attention to some special content or information.

The ".container" class provides a responsive fixed width container

The ".container-fluid" class provides a full width container, spanning the entire width of the viewport

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs

Responsive web design is about creating web sites which automatically adjust themselves to look good
on all devices, from small phones to large desktops.

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header

Alerts

Bootstrap 5 provides an easy way to create predefined alert messages:

Success! This alert box could indicate a successful or positive action.

Info! This alert box could indicate a neutral informative change or action.

Warning! This alert box could indicate a warning that might need attention.

Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.

Secondary! Indicates a slightly less important action.

Dark! Dark grey alert.

Light! Light grey alert.

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

The Bootstrap 5 grid system has six classes:

.col- (extra small devices - screen width less than 576px)

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

Bootstrap 5 Images

.rounded class adds rounded corners to an image

.rounded-circle class shapes the image to a circle

.img-thumbnail class shapes the image to a thumbnail (bordered)

.mx-auto Center an image by adding the utility

.d-block (display:block) to the image

.btn class is intended to be used in conjunction with our button variants, or to serve as a basis for your
own custom styles.

The button classes can be used on <a>, <button>, or <input> elements

.btn-outline Move the mouse over them to see an additional "hover" effect

.btn-lg Fancy larger

.btn-sm smaller buttons

.d-grid create a block level button that spans the entire width of the parent element
If you have many block-level buttons, you can control the space between them with the .gap-3 class

Bootstrap 5 Default Settings

Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

<h1> - <h6>

Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size.

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-
weight), and there are six classes to choose from: .display-1 to .display-6

Bootstrap 5 will style <mark> and .mark with a yellow background color and some padding

.text-start Indicates left-aligned text

.text-center Indicates center-aligned text

.text-decoration-none Removes the underline from a link

.text-end Indicates right-aligned text

.text-lowercase Indicates lowercased text

.text-uppercase Indicates uppercased text

.text-capitalize Indicates capitalized text

Text Colors

Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-
danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light.

.text-color class to get the right text color for each background
.text-bg-color classes and Bootstrap will automatically handle the appropriate text color for each
background color

getElementById() - "finds" an HTML element (with id="demo"), and changes the element content
(innerHTML) to "Hello JavaScript"

JavaScript accepts both double and single quotes

JavaScript Can Change HTML Attribute Values

JavaScript Can Change HTML Styles

JavaScript Can Hide HTML Elements

JavaScript Can Show HTML Elements

JavaScript and Java are completely different languages, both in concept and design.

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.

JavaScript code is inserted between <script> and </script> tags

function is a block of JavaScript code, that can be executed when "called" for.

a function can be called when an event occurs, like when the user clicks a button.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

Placing scripts at the bottom of the <body> element improves the display speed, because script
interpretation slows down the display.

External scripts cannot contain <script> tags.

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().

 Writing into an alert box, using window.alert().

 Writing into the browser console, using console.log().

Using document.write() after an HTML document is loaded, will delete all existing HTML

The document.write() method should only be used for testing.

window.print() method in the browser to print the content of the current window.

computer program is a list of "instructions" to be "executed" by a computer

JavaScript program is a list of programming statements

In HTML, JavaScript programs are executed by the web browser.

Values, Operators, Expressions, Keywords, and Comments.

JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons separate JavaScript statements.

JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

var Declares a variable

let Declares a block variable

const Declares a block constant

if Marks a block of statements to be executed on a condition

switch Marks a block of statements to be executed in different cases

for Marks a block of statements to be executed in a loop

function Declares a function

return Exits a function

try Implements error handling to a block of statements

Fixed values are called Literals.

The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

2. Strings are text, written within double or single quotes:

Variable values are called Variables.

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

An expression is a combination of values, variables, and operators, which computes to a value.

x * 10

A JavaScript name must begin with:

 A letter (A-Z or a-z)

 A dollar sign ($)

 Or an underscore (_)

Numbers are not allowed as the first character in names.

This way JavaScript can easily distinguish identifiers from numbers.

All JavaScript identifiers are case sensitive. 

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

JavaScript uses the Unicode character set.

Single line comments start with //.

Multi-line comments start with /* and end with */.

JavaScript Variables can be declared in 4 ways:

 Automatically

 Using var

 Using let

 Using const

It is considered good programming practice to always declare variables before use.

The var keyword was used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

The var keyword should only be used in code written for older browsers.

When to Use var, let, or const?

1. Always declare variables

2. Always use const if the value should not be changed

3. Always use const if the type should not be changed (Arrays and Objects)

4. Only use let if you can't use const

5. Only use var if you MUST support old browsers.

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.

The let and const keywords are not supported in Internet Explorer 11 or earlier.

Arithmetic Operators are used to perform arithmetic on numbers

The numbers (in an arithmetic operation) are called operands.

The operation (to be performed between the two operands) is defined by an operator.

The exponentiation operator (**) raises the first operand to the power of the second operand.

Assignment operators assign values to JavaScript variables.

When used on strings, the + operator is called the concatenation operator.

JavaScript has 8 Datatypes

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

The Object Datatype

The object data type can contain:

1. An object
2. An array
3. A date

A JavaScript variable can hold any type of data.

When adding a number and a string, JavaScript will treat the number as a string.

JavaScript has dynamic types. This means that the same variable can be used to hold different data types

You will learn more about strings later in this tutorial.

JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to
be represented by a normal JavaScript Number.

JavaScript Arrays
JavaScript arrays are written with square brackets.

Array items are separated by commas.

const cars = ["Saab", "Volvo", "BMW"];

JavaScript objects are written with curly braces {}.

Object properties are written as name:value pairs, separated by commas.

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

a variable without a value, has the value undefined. The type will also be undefined.

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

Objects are variables too. But objects can contain many values.

It is a common practice to declare objects with the const keyword.

Learn more about using const with objects in the chapter: JS Const.

JavaScript objects are containers for named values called properties.

A method is a function stored as a property.

HTML events are "things" that happen to HTML elements.

Common HTML Events

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page