Bootstrap folder structure - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of the css folder in a Bootstrap project?

The css folder holds all the CSS files, including Bootstrap's core styles and any custom styles you add to change the look of your site.

beginner

What files are typically found inside the js folder in Bootstrap?

The js folder contains JavaScript files that add interactive features, like modals and dropdowns, including Bootstrap's JavaScript plugins and sometimes custom scripts.

intermediate

Why do we have a fonts or webfonts folder in Bootstrap projects?

This folder stores font files used by Bootstrap or custom fonts, ensuring text displays correctly and consistently across browsers.

beginner

What is the role of the img folder in a Bootstrap folder structure?

The img folder holds all images used on the website, like logos, icons, and photos, keeping them organized and easy to find.

intermediate

Where do you place your custom Bootstrap theme files in the folder structure?

Custom theme files usually go inside the css folder, often named something like custom.css, so they load after Bootstrap's default styles.

Which folder in a Bootstrap project typically contains the JavaScript files?

A img

B css

C fonts

D js

The js folder contains JavaScript files that add interactivity to the site.

Where should you put your custom CSS files in a Bootstrap folder structure?

A css folder

B fonts folder

C img folder

D js folder

Custom CSS files go inside the css folder to override or add styles.

What is the main content of the img folder?

A JavaScript files

B Image files like logos and icons

C Font files

D CSS files

The img folder stores images used on the website.

Why do Bootstrap projects include a fonts or webfonts folder?

A To hold image files

B To store JavaScript plugins

C To keep font files for consistent text display

D To save CSS files

Fonts folder holds font files needed for proper text rendering.

Which folder would you check first if Bootstrap's interactive components are not working?

A js

B css

C img

D fonts

Interactive features rely on JavaScript files in the js folder.

Describe the typical folder structure of a Bootstrap project and the purpose of each main folder.

Think about where styles, scripts, images, and fonts are stored.

Explain why organizing files into folders like css, js, img, and fonts is helpful in a Bootstrap project.

Consider how neat folders help both developers and browsers.