Importing only needed components in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import only the Bootstrap button CSS.

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap[1]">

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

A.min.css

B-button.min.css

C-buttons.min.css

D-btn.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a non-existent CSS file name.

Trying to import a file that does not exist in Bootstrap CDN.

The main Bootstrap CSS file is bootstrap.min.css. To import only button styles, you still use the main CSS or a custom build. Here, the correct completion is .min.css.

2fill in blank

medium

Complete the code to import only the Bootstrap button JavaScript bundle.

Bootsrap

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap[1]" integrity="sha384-..." crossorigin="anonymous"></script>

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

A-bundle.min.js

B-buttons.min.js

C-button.min.js

D-btn.min.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent JS file name.

Trying to import only button JS which is not separately available.

The Bootstrap JavaScript bundle file is named bootstrap.bundle.min.js. This includes all needed JS components.

3fill in blank

hard

Fix the error in the import statement to load only the Bootstrap modal CSS.

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap[1]">

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

A.css

B-min.css

C.min.css

D-modal.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import component-specific CSS files that do not exist.

Using incorrect file suffixes.

The correct Bootstrap CSS file is bootstrap.min.css. There is no separate bootstrap-modal.min.css file. To use modal styles, import the main CSS file.

4fill in blank

hard

Fill both blanks to import Bootstrap's grid CSS and JavaScript bundle correctly.

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap[1]">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap[2]" crossorigin="anonymous"></script>

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

A.min.css

B-bundle.min.js

C-grid.min.css

D.js

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a non-existent grid-only CSS file.

Using incorrect JS file suffixes.

Bootstrap does not provide separate CSS files for grid only, so the main CSS file bootstrap.min.css is used. The JavaScript bundle is bootstrap.bundle.min.js.

5fill in blank

hard

Fill all three blanks to import Bootstrap's utilities CSS, popper JS, and Bootstrap JS bundle correctly.

Bootsrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap[1]">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper[2]" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap[3]" crossorigin="anonymous"></script>

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

A.min.css

B.min.js

C-bundle.min.js

D-utilities.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a separate utilities CSS file that does not exist.

Using wrong suffixes for Popper or Bootstrap JS files.

Bootstrap utilities are included in the main CSS file bootstrap.min.css. Popper JS uses .min.js suffix. Bootstrap JS bundle uses -bundle.min.js.

Practice

1. Why should you import only the needed Bootstrap components instead of the full CSS file?

easy

A. To keep the website fast by reducing unused CSS

B. Because full CSS files are always broken

C. To make the website look different on every page

D. Because Bootstrap requires it for JavaScript to work

Solution

1. Step 1: Understand the impact of CSS size

   Loading the full Bootstrap CSS includes all styles, even those not used, which slows down the website.

2. Step 2: Benefit of selective importing

   Importing only needed components reduces CSS size, making the site faster to load and more efficient.

3. Final Answer:

   To keep the website fast by reducing unused CSS -> Option A

4. Quick Check:

   Selective import = faster site [OK]

Hint: Less CSS means faster loading and better performance [OK]

Common Mistakes:

• Thinking full CSS is always broken
• Believing full CSS changes page layout randomly
• Confusing CSS import with JavaScript requirements

2. Which of the following is the correct way to import only the Bootstrap button component using SCSS?

easy

A. @import 'bootstrap/js/buttons.js';

B. @import 'bootstrap/css/buttons.css';

C. @import 'bootstrap/scss/buttons';

D. @import 'bootstrap/scss/all';

Solution

1. Step 1: Identify SCSS import syntax

   Bootstrap SCSS components are imported using @import with the path to the specific component SCSS file.

2. Step 2: Choose the correct component path

   The buttons component is located at 'bootstrap/scss/buttons', so '@import 'bootstrap/scss/buttons';' is correct.

3. Final Answer:

   @import 'bootstrap/scss/buttons'; -> Option C

4. Quick Check:

   SCSS import for buttons = @import 'bootstrap/scss/buttons'; [OK]

Hint: Use SCSS path and component name for selective import [OK]

Common Mistakes:

• Using CSS file path instead of SCSS
• Importing JavaScript files with @import
• Importing full 'all' instead of specific component

3. Given this SCSS import code:

@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/forms';

What will be included in the compiled CSS?

medium

A. Only JavaScript for buttons and forms

B. All Bootstrap styles including buttons and forms

C. No styles because imports are incorrect

D. Only styles for buttons and forms components

Solution

1. Step 1: Understand SCSS imports

   Importing specific SCSS files includes only those components' styles in the final CSS.

2. Step 2: Analyze given imports

   Here, only 'buttons' and 'forms' SCSS files are imported, so only their styles are compiled.

3. Final Answer:

   Only styles for buttons and forms components -> Option D

4. Quick Check:

   Import buttons + forms = only those styles [OK]

Hint: SCSS imports include only specified components' CSS [OK]

Common Mistakes:

• Assuming full Bootstrap CSS is included
• Confusing SCSS imports with JavaScript imports
• Thinking imports are ignored if partial

4. You wrote this SCSS import:

@import 'bootstrap/scss/button';

But the button styles are not applied. What is the likely error?

medium

A. The folder name should be 'buttons' not 'button'

B. You must import the full Bootstrap CSS instead

C. SCSS files cannot be imported this way

D. You forgot to include JavaScript files

Solution

1. Step 1: Check component folder names

   Bootstrap SCSS components use plural folder names, so 'buttons' is correct, not 'button'.

2. Step 2: Understand import failure

   Incorrect folder name causes import to fail silently, so styles don't apply.

3. Final Answer:

   The folder name should be 'buttons' not 'button' -> Option A

4. Quick Check:

   Correct folder name = 'buttons' [OK]

Hint: Check exact component folder names in Bootstrap SCSS [OK]

Common Mistakes:

• Using singular instead of plural folder names
• Thinking JavaScript affects CSS imports
• Assuming full CSS import is always needed

5. You want to build a custom Bootstrap CSS file with only buttons, forms, and utilities components. Which SCSS import sequence is correct to achieve this?

hard

A. @import 'bootstrap/scss/buttons';\n@import 'bootstrap/scss/forms';\n@import 'bootstrap/scss/utilities';\n@import 'bootstrap/scss/javascript';

B. @import 'bootstrap/scss/functions';\n@import 'bootstrap/scss/variables';\n@import 'bootstrap/scss/mixins';\n@import 'bootstrap/scss/buttons';\n@import 'bootstrap/scss/forms';\n@import 'bootstrap/scss/utilities';

C. @import 'bootstrap/scss/all';

D. @import 'bootstrap/scss/buttons';\n@import 'bootstrap/scss/forms';\n@import 'bootstrap/scss/utilities';

Solution

1. Step 1: Recognize Bootstrap SCSS dependencies

   Bootstrap components depend on functions, variables, and mixins files, so these must be imported first.

2. Step 2: Import needed components after dependencies

   After importing dependencies, import buttons, forms, and utilities SCSS files to include only those styles.

3. Final Answer:

   Import functions, variables, mixins, then buttons, forms, utilities -> Option B

4. Quick Check:

   Include dependencies before components [OK]

Hint: Always import functions, variables, mixins before components [OK]

Common Mistakes:

• Skipping functions, variables, mixins imports
• Importing full 'all' instead of selective components
• Adding JavaScript imports in SCSS