Bootstrap folder structure - Mini Project: Build & Apply

Bootstrap Folder Structure Setup

📖 Scenario: You are starting a new website project using Bootstrap. To keep your project organized, you need to create the basic folder structure that holds your HTML files, CSS files, JavaScript files, and Bootstrap files.

🎯 Goal: Create a simple Bootstrap folder structure with folders named css, js, and bootstrap inside a main project folder called my-bootstrap-site.

📋 What You'll Learn

Create a main folder named my-bootstrap-site

Inside my-bootstrap-site, create three folders named css, js, and bootstrap

Inside the css folder, create an empty file named style.css

Inside the js folder, create an empty file named script.js

Inside the bootstrap folder, create two empty files named bootstrap.min.css and bootstrap.bundle.min.js

💡 Why This Matters

🌍 Real World

Organizing files in a web project is like keeping your desk tidy so you can find your tools easily when building a website.

💼 Career

Web developers must organize their projects well to work efficiently and collaborate with others.

1

Create the main project folder

Create a main folder named my-bootstrap-site to hold all your website files.

Bootsrap

# Create the folder named my-bootstrap-site
# Your code here

Need a hint?

Think of this as creating a big box to keep all your website stuff inside.

2

Add subfolders for CSS, JS, and Bootstrap

Inside the my-bootstrap-site folder, create three folders named css, js, and bootstrap.

Bootsrap

# Inside my-bootstrap-site, create folders css, js, and bootstrap
# Your code here

Need a hint?

These folders will keep your styles, scripts, and Bootstrap files organized.

3

Add empty CSS and JS files

Inside the css folder, create an empty file named style.css. Inside the js folder, create an empty file named script.js.

Bootsrap

# Create style.css inside css folder and script.js inside js folder
# Your code here

Need a hint?

These files will hold your custom styles and JavaScript code.

4

Add Bootstrap CSS and JS files

Inside the bootstrap folder, create two empty files named bootstrap.min.css and bootstrap.bundle.min.js.

Bootsrap

# Create bootstrap.min.css and bootstrap.bundle.min.js inside bootstrap folder
# Your code here

Need a hint?

These files are the Bootstrap framework files you will use in your project.