Introduction and Setting Up Bootstrap

Welcome to the world of Bootstrap! In this lesson, we will kickstart our journey by learning how to set up Bootstrap in your projects. This will serve as the foundation upon which we will build responsive and visually appealing websites. You might already have some knowledge of HTML and CSS, and with Bootstrap, you'll discover how to easily enhance your styling capabilities.

In this lesson, we'll focus on the basics of getting Bootstrap up and running in your web project. We'll walk through:

1. Including Bootstrap in Your Project:
   • Exploring the common ways to include Bootstrap.
   • How to add Bootstrap's CSS and JavaScript libraries to your HTML file.
2. Verifying Bootstrap Setup:
   • Ensuring that everything is correctly set up so that you can use Bootstrap classes right away.

By the end of this lesson, you will have a functional Bootstrap setup that you can use to build responsive websites.

There are several ways to include Bootstrap in your project. Here are the most common methods:

1. Using a Content Delivery Network (CDN):

   • This is the easiest and most common way to add Bootstrap to your project. By including links to Bootstrap's CSS and JavaScript files hosted on a CDN, you ensure that your project can access them directly from the internet.
   • This is the method we'll be using:
     HTML

     <!-- Bootstrap CSS -->
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
     <!-- Bootstrap JS and dependencies -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. Downloading Bootstrap Files:

   • You can download the Bootstrap CSS and JavaScript files and include them locally in your project. This method requires you to keep the files updated manually.
   • Steps:
     1. Download the Bootstrap files from the official Bootstrap website.
     2. Include the downloaded files in your HTML.
     HTML

     <link rel="stylesheet" href="path/to/bootstrap.min.css">
     <script src="path/to/jquery.min.js"></script>
     <script src="path/to/popper.min.js"></script>
     <script src="path/to/bootstrap.min.js"></script>

3. Using Package Managers (npm or yarn):

   • If you are using a build tool like Webpack, you can include Bootstrap via package managers like npm or yarn.
   • Steps:
     1. Install Bootstrap using npm:
        Shell

        npm install bootstrap

     2. Import Bootstrap into your JavaScript or CSS file:
        JavaScript

        import 'bootstrap/dist/css/bootstrap.min.css';
        import 'bootstrap/dist/js/bootstrap.bundle.min.js';

By understanding these common methods, you can choose the one that best fits your project needs. For this course, we will be using the CDN method, as it is straightforward and easy to set up.