Bootstrap folder structure - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to link the Bootstrap CSS file in your HTML head.

Bootsrap

<link rel="stylesheet" href="css/[1]">

Drag options to blanks, or click blank then click option'

Abootstrap.css

Bstyle.css

Cmain.js

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using the JavaScript file name instead of CSS.

Linking to a non-existent file like style.css.

The Bootstrap CSS file is usually named bootstrap.css and placed inside the css folder.

2fill in blank

medium

Complete the code to include the Bootstrap JavaScript file before the closing body tag.

Bootsrap

<script src="js/[1]"></script>

Drag options to blanks, or click blank then click option'

Abootstrap.bundle.min.js

Bapp.js

Cstyle.css

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Linking to CSS files in the script tag.

Using incorrect file names like app.js.

The Bootstrap JavaScript file is usually named bootstrap.bundle.min.js and placed inside the js folder.

3fill in blank

hard

Fix the error in the folder structure path to the Bootstrap CSS file.

Bootsrap

<link rel="stylesheet" href="[1]/bootstrap.min.css">

Drag options to blanks, or click blank then click option'

Ajs

Bcss

Cimages

Dfonts

Attempts:

3 left

💡 Hint

Common Mistakes

Using the js folder for CSS files.

Using folders like images or fonts for CSS files.

The Bootstrap CSS file is stored in the css folder, not in js or other folders.

4fill in blank

hard

Fill both blanks to create a correct Bootstrap folder structure with CSS and JS folders.

Bootsrap

<project_root>/
  ├── [1]/
  └── [2]/

Drag options to blanks, or click blank then click option'

Acss

Bimages

Cjs

Ddocs

Attempts:

3 left

💡 Hint

Common Mistakes

Using images or docs folders instead of js for scripts.

Swapping css and js folder names.

The main folders for Bootstrap files are css for stylesheets and js for JavaScript files.

5fill in blank

hard

Fill all three blanks to complete the Bootstrap folder structure including CSS, JS, and fonts folders.

Bootsrap

<project_root>/
  ├── [1]/
  ├── [2]/
  └── [3]/

Drag options to blanks, or click blank then click option'

Afonts

Bjs

Ccss

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Using assets folder instead of fonts.

Mixing up the order of folders.

The typical Bootstrap folder structure includes css for styles, js for scripts, and fonts for icon fonts or typography files.