Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello Bootstrap History and Evolution Advantages and Disadvantages Maximizing Learning Quiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPM Challenge & Quiz

3. Basic Concepts

Grid System Typography Part 1 Typography Part 2 Buttons Part 1 Buttons Part 2 Margins and Paddings Forms Challenge & Quiz

4. Advanced Concepts

Navigation Images Cards Modals Carousels Challenge & Quiz

5. Creating a Portfolio Website with Bootstrap

Introduction Setting Up Development Environment Building the Header Navigation Designing the Hero Section Building the Experience Section Crafting the Skills Section Implementing the Contact Form Conclusion

Bootstrap: Building Stylish Websites

Modals

The Modal component of Bootstrap is a helpful tool for showcasing interactive content like login forms, image galleries, or alerts. Modals are essentially dialog boxes that pop up over the main content and require user interaction to close. They can be activated using different events such as button clicks, links, or JavaScript functions.

Key Features

Bootstrap modals offer customizable sizes, animations, backdrops, and positioning. They support various types of content and can be triggered by different events. They are also accessible to all users and can be further enhanced by adding ARIA attributes and focus management.

Usage Classes

modal: Base class for creating a modal dialog;
modal-dialog: Container for the modal content;
modal-content: Wrapper for the modal header, body, and footer;
modal-header: Container for the modal title and optional close button;
modal-title: Styles the title of the modal;
modal-body: Container for the main content of the modal;
modal-footer: Container for buttons or additional content in the modal footer;
fade: Applies a fade-in animation to the modal for smooth transitions;
modal-dialog-centered: Centers the modal vertically within the viewport;
modal-static: Prevents the modal from being dismissed by clicking outside or pressing the Escape key.

Example 1: Basic Modal

index.html

index.css

index.js

Code Description

Modal Trigger Button:
- A button with the class btn and btn-success is used to trigger the modal.
- The data-bs-toggle and data-bs-target attributes are Bootstrap attributes to control the modal behavior.
Modal Structure:
- The modal is enclosed within a <div> element with the class modal.
- It has additional classes like fade for the fade animation effect and modal-dialog for styling the modal dialog.
Modal Header:
- Contains the title (modal-title) and a close button (btn-close) with the data-bs-dismiss attribute to close the modal.
Modal Body:
- Contains the main content of the modal.
Modal Footer:
- Contains buttons or other controls related to the modal action.
- In this example, there are buttons for closing the modal and saving changes.

Example 2: Animated Modal

index.html

index.css

index.js

Code Description

Animated Modal Trigger Button:
- A button with the class btn and btn-primary is used to trigger the animated modal.
- The data-bs-toggle and data-bs-target attributes are Bootstrap attributes to control the modal behavior.
Animated Modal Structure:
- The modal is enclosed within a <div> element with the class modal and fade for the fade animation effect.
- It has additional classes like modal-dialog for styling the modal dialog and modal-dialog-scrollable to enable scrolling when the modal content exceeds the viewport height.
Modal Content:
- Contains a modal header with a title and a close button.
- Contains a modal body with the main content.
- Contains a modal footer with buttons for user interaction.
Animation Classes:
- Bootstrap provides animation classes like animate__animated and animate__fadeInUp to animate the modal when it appears.
- These classes are used to apply the fadeInUp animation effect to the modal content.

Everything was clear?

Section 4. Chapter 4

Course Content

Bootstrap: Building Stylish Websites

1. Understanding Bootstrap

Hello Bootstrap History and Evolution Advantages and Disadvantages Maximizing Learning Quiz

2. Setting Up Environment

Boostrap Installation Options Installing via CDN Installing via NPM Challenge & Quiz

3. Basic Concepts

Grid System Typography Part 1 Typography Part 2 Buttons Part 1 Buttons Part 2 Margins and Paddings Forms Challenge & Quiz

4. Advanced Concepts

Navigation Images Cards Modals Carousels Challenge & Quiz

5. Creating a Portfolio Website with Bootstrap

Bootstrap: Building Stylish Websites

Modals

Key Features

Usage Classes

modal: Base class for creating a modal dialog;
modal-dialog: Container for the modal content;
modal-content: Wrapper for the modal header, body, and footer;
modal-header: Container for the modal title and optional close button;
modal-title: Styles the title of the modal;
modal-body: Container for the main content of the modal;
modal-footer: Container for buttons or additional content in the modal footer;
fade: Applies a fade-in animation to the modal for smooth transitions;
modal-dialog-centered: Centers the modal vertically within the viewport;
modal-static: Prevents the modal from being dismissed by clicking outside or pressing the Escape key.

Example 1: Basic Modal

index.html

index.css

index.js

Code Description

Modal Trigger Button:
- A button with the class btn and btn-success is used to trigger the modal.
- The data-bs-toggle and data-bs-target attributes are Bootstrap attributes to control the modal behavior.
Modal Structure:
- The modal is enclosed within a <div> element with the class modal.
- It has additional classes like fade for the fade animation effect and modal-dialog for styling the modal dialog.
Modal Header:
- Contains the title (modal-title) and a close button (btn-close) with the data-bs-dismiss attribute to close the modal.
Modal Body:
- Contains the main content of the modal.
Modal Footer:
- Contains buttons or other controls related to the modal action.
- In this example, there are buttons for closing the modal and saving changes.

Example 2: Animated Modal

index.html

index.css

index.js

Code Description

Animated Modal Trigger Button:
- A button with the class btn and btn-primary is used to trigger the animated modal.
- The data-bs-toggle and data-bs-target attributes are Bootstrap attributes to control the modal behavior.
Animated Modal Structure:
- The modal is enclosed within a <div> element with the class modal and fade for the fade animation effect.
- It has additional classes like modal-dialog for styling the modal dialog and modal-dialog-scrollable to enable scrolling when the modal content exceeds the viewport height.
Modal Content:
- Contains a modal header with a title and a close button.
- Contains a modal body with the main content.
- Contains a modal footer with buttons for user interaction.
Animation Classes:
- Bootstrap provides animation classes like animate__animated and animate__fadeInUp to animate the modal when it appears.
- These classes are used to apply the fadeInUp animation effect to the modal content.

Everything was clear?

Section 4. Chapter 4