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

Navigation

Navbars

Navbars are responsive navigation headers commonly used to provide site navigation links, branding, and other interactive elements.

Key Features

Navbars are designed to be responsive and will automatically collapse into a mobile-friendly menu when viewed on smaller screens. They are capable of supporting various types of content, including navigation links, brand logos, search bars, dropdown menus, and buttons.

Usage

Start by incorporating the navbar class to establish the basic structure of your navbar;
Enhance your navbar by adding specific elements such as navbar-brand for branding, navbar-nav for navigation links, navbar-toggler for the responsive toggle button, and collapse for collapsible content;
Personalize the appearance of your navbar further by applying additional classes like bg-dark to set the background color.

index.html

index.css

index.js

Code Description

Navbar Container (nav):
- Bootstrap class navbar defines the navigation bar.
- navbar-expand-lg makes the navbar expand to full width on large screens and collapse on smaller screens.
- navbar-dark bg-dark sets the navbar to have dark background and text color.
Brand/Logo (a):
- Represents the brand or logo of the website. Clicking on it typically takes the user to the homepage.
Toggler Button (button):
- A button that toggles the visibility of the navbar links on small screens.
- data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent": Bootstrap attributes to toggle the collapsible content.
- navbar-toggler-icon: Icon displayed on the button to indicate the toggling functionality.
Navbar Links (<div class="collapse navbar-collapse" ...>):
- Container for navbar links that collapse on smaller screens.
- navbar-collapse class collapses the navbar content when the screen is resized.
- id="navbarSupportedContent": Corresponds to the data-bs-target attribute of the toggler button.
- ml-autoclass aligns the navbar links to the right.
Navbar Links (<ul class="navbar-nav ml-auto">):
- <ul class="navbar-nav ml-auto">: Unordered list containing the navbar links.
- navbar-nav class defines a list of navigation items.
- ml-auto class aligns the list items to the right.
Individual Navbar Links (<li class="nav-item">):
- Each list item represents a navigation link.
- nav-item class defines a navigation item.
- active class marks the active navigation item.
- <a class="nav-link" href="#">Home</a>: Defines a navigation link. nav-link class styles the link.

Navs

Navs are versatile navigation components that can be used for various navigation purposes, such as tabbed navigation, pill navigation, or vertical navigation.

Key Features

Navs can be utilized for both horizontal and vertical navigation layouts and support various styles, such as tabs, pills, and justified navigation.

Usage

Start by incorporating the nav class to create a basic nav structure;
Populate your nav with navigation items using <a> or <button> elements, each with the nav-item class;
Further enhance the appearance and functionality of your nav by applying additional classes such as nav-tabs for tab navigation or nav-pills for pill navigation.

index.html

index.css

index.js

Code Description

Navigation Tabs (<ul class="nav nav-tabs" ...>):
- Bootstrap classes nav and nav-tabs are used to create a tabbed navigation menu.
Individual Tab Items (<li class="nav-item" ...>):
- Each list item represents a tab in the tabbed navigation.
- nav-item class is used to style the tab item.
Tab Links (<a class="nav-link" ...>):
- Each <a> element within the list item represents a tab link.
- nav-link class is used to style the tab link.
- data-bs-toggle="tab" attribute enables tab behavior.
- href attribute points to the ID of the associated tab content.
- role="tab" attribute specifies the role of the link.
- aria-controls attribute specifies the ID of the associated tab content.
- aria-selected attribute indicates whether the tab is selected.
Active Tab (<a class="nav-link active" ...>):
- The tab with the active class is the default active tab.
- aria-selected="true" attribute indicates that this tab is selected by default.
Unique IDs and Href Attributes:
- Each tab link (<a>) has a unique id attribute (home-tab, profile-tab, contact-tab) that corresponds to the href attribute of the associated tab content.

Everything was clear?

Section 4. Chapter 1

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

Navigation

Navbars

Navbars are responsive navigation headers commonly used to provide site navigation links, branding, and other interactive elements.

Key Features

Usage

Start by incorporating the navbar class to establish the basic structure of your navbar;
Enhance your navbar by adding specific elements such as navbar-brand for branding, navbar-nav for navigation links, navbar-toggler for the responsive toggle button, and collapse for collapsible content;
Personalize the appearance of your navbar further by applying additional classes like bg-dark to set the background color.

index.html

index.css

index.js

Code Description

Navbar Container (nav):
- Bootstrap class navbar defines the navigation bar.
- navbar-expand-lg makes the navbar expand to full width on large screens and collapse on smaller screens.
- navbar-dark bg-dark sets the navbar to have dark background and text color.
Brand/Logo (a):
- Represents the brand or logo of the website. Clicking on it typically takes the user to the homepage.
Toggler Button (button):
- A button that toggles the visibility of the navbar links on small screens.
- data-bs-toggle="collapse" and data-bs-target="#navbarSupportedContent": Bootstrap attributes to toggle the collapsible content.
- navbar-toggler-icon: Icon displayed on the button to indicate the toggling functionality.
Navbar Links (<div class="collapse navbar-collapse" ...>):
- Container for navbar links that collapse on smaller screens.
- navbar-collapse class collapses the navbar content when the screen is resized.
- id="navbarSupportedContent": Corresponds to the data-bs-target attribute of the toggler button.
- ml-autoclass aligns the navbar links to the right.
Navbar Links (<ul class="navbar-nav ml-auto">):
- <ul class="navbar-nav ml-auto">: Unordered list containing the navbar links.
- navbar-nav class defines a list of navigation items.
- ml-auto class aligns the list items to the right.
Individual Navbar Links (<li class="nav-item">):
- Each list item represents a navigation link.
- nav-item class defines a navigation item.
- active class marks the active navigation item.
- <a class="nav-link" href="#">Home</a>: Defines a navigation link. nav-link class styles the link.

Navs

Navs are versatile navigation components that can be used for various navigation purposes, such as tabbed navigation, pill navigation, or vertical navigation.

Key Features

Navs can be utilized for both horizontal and vertical navigation layouts and support various styles, such as tabs, pills, and justified navigation.

Usage

Start by incorporating the nav class to create a basic nav structure;
Populate your nav with navigation items using <a> or <button> elements, each with the nav-item class;
Further enhance the appearance and functionality of your nav by applying additional classes such as nav-tabs for tab navigation or nav-pills for pill navigation.

index.html

index.css

index.js

Code Description

Navigation Tabs (<ul class="nav nav-tabs" ...>):
- Bootstrap classes nav and nav-tabs are used to create a tabbed navigation menu.
Individual Tab Items (<li class="nav-item" ...>):
- Each list item represents a tab in the tabbed navigation.
- nav-item class is used to style the tab item.
Tab Links (<a class="nav-link" ...>):
- Each <a> element within the list item represents a tab link.
- nav-link class is used to style the tab link.
- data-bs-toggle="tab" attribute enables tab behavior.
- href attribute points to the ID of the associated tab content.
- role="tab" attribute specifies the role of the link.
- aria-controls attribute specifies the ID of the associated tab content.
- aria-selected attribute indicates whether the tab is selected.
Active Tab (<a class="nav-link active" ...>):
- The tab with the active class is the default active tab.
- aria-selected="true" attribute indicates that this tab is selected by default.
Unique IDs and Href Attributes:
- Each tab link (<a>) has a unique id attribute (home-tab, profile-tab, contact-tab) that corresponds to the href attribute of the associated tab content.

Everything was clear?

Section 4. Chapter 1