Bootstrap Getting Started

This article will teach you how to use the Bootstrap framework to build a web page.

Getting Started with Bootstrap

In this tutorial, you'll discover how easy it is to create a web page using Bootstrap. However, before you begin, make sure you have a code editor and some basic working knowledge of HTML and CSS.

If you're new to web development, this tutorial is an ideal starting point for you.

Let's get started creating our first Bootstrap-powered web page.

Creating Your First Web Page with Bootstrap

To create a basic Bootstrap template, we'll incorporate the Bootstrap CSS and JS files through a CDN (Content Delivery Network). Bootstrap requires Popper.js, a third-party library, for certain components like popovers and tooltips. You can either include Popper.js separately or utilize Bootstrap JS bundled with Popper.

For optimal performance, we recommend using CDN links to add Bootstrap to your project. CDNs host files on multiple servers distributed worldwide, reducing loading times as users access files from the nearest server. In our examples, we'll use CDN links:

Now, let's go through the following steps. By the end of this tutorial, you'll have a simple Bootstrap-powered web page displaying a Hello world message in your web browser.

Step 1: Creating a Basic HTML file

Start by opening your preferred code editor and create a new HTML file. Begin with an empty window and enter the following code, saving it as basic.html on your desktop.

<body>
    <h1>"Hey Friends"</h1>
</body>

Try this code

Tip: Remember to always include the viewport <meta> tag within the <head> section of your document to enable touch zooming and ensure proper rendering on mobile devices.

Step 2: Making this HTML File a Bootstrap Template

To transform this plain HTML file into a Bootstrap template, simply include the Bootstrap CSS and JS files using their CDN links. Additionally, place JavaScript files at the bottom of the page, just before the closing </body> tag to optimize your web pages' performance.

<body>
    <h1>"Hey Friends"</h1>
    <!-- Bootstrap JS file Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

Try this code

That's it! With the Bootstrap CSS and JS files added to our HTML page, we can now start developing any responsive site or application using the Bootstrap framework.

CDN links now include attributes like integrity and crossorigin to implement Subresource Integrity (SRI), a security feature that safeguards against potential attacks from compromised CDNs. By providing a cryptographic hash, SRI ensures that the fetched files, whether from a CDN or any source, remain unaltered and free from malicious modifications.

Note: The most significant change in Bootstrap 5 is its independence from jQuery. While jQuery is no longer required, it can still be utilized to quickly implement Bootstrap component methods and options. If jQuery is detected in the window object, Bootstrap adds its components to jQuery's plugin system, which will be covered in the advanced section of this tutorial series.

Tip: When a visitor has previously downloaded Bootstrap's CSS and JS files from the same CDN while visiting other sites, their browser will load these files from the cache, resulting in faster loading times.

Step 3: Saving and Viewing the File

Now, save the file on your desktop with the name bootstrap-template.html.

To view this file in a web browser, locate it on your desktop, right-click on it, and select your preferred web browser. Alternatively, you can directly open your browser and drag the file into it.

Note: Make sure to specify the .html extension in the file name, as certain text editors, like Notepad on Windows, may automatically save it with a .txt extension.

Downloading the Bootstrap Files

Alternatively, you have the option to download Bootstrap's CSS and JS files directly from their official website and include them in your project. There are two versions available for download: the compiled Bootstrap and the Bootstrap source files. Bootstrap 5 files can be downloaded from the official website.

The compiled download includes minified versions of CSS and JavaScript files, which contribute to faster and simpler web development. Additionally, it incorporates optional JavaScript dependencies, such as Popper bundled with Bootstrap JS (bootstrap.bundle.*). On the other hand, the source download comprises the original source files for all CSS and JavaScript, along with a local copy of the documentation.

To use the compiled Bootstrap, download and unzip the package. Upon examining the folders, you'll find compiled CSS and JS files (bootstrap.), as well as minified CSS and JS (bootstrap.min.). To enhance website performance and save precious bandwidth due to reduced HTTP requests and download size, utilize the minified versions of CSS and JS files (bootstrap.min.css and bootstrap.bundle.min.js).

Tip: Fortunately, you don't need to separately include Popper.js to make Bootstrap's tooltip and popover components work, as it's already integrated within the bootstrap.bundle.js and minified bootstrap.bundle.min.js files.

FAQ

How do I get started with Bootstrap?

To get started with Bootstrap, follow these steps:

Include Bootstrap: You can include Bootstrap in your project by adding the Bootstrap CSS and JavaScript files to your HTML. You can either download the files and host them on your server or use a content delivery network (CDN) to link to them.
Use the Grid System: Bootstrap's grid system is at the core of creating responsive layouts. It uses rows and columns to structure content. Start by wrapping your content in a <div> with the class container or container-fluid to create a grid container. Then, use <div> elements with classes like row and col-* to define your layout.
Explore Components: Bootstrap offers a wide range of components such as buttons, forms, navigation bars, cards, modals, and more. You can easily integrate these components into your project by copying and pasting their HTML code from the Bootstrap documentation.
Responsive Design: Utilize Bootstrap's responsive classes to control how your content behaves on different screen sizes. Classes like col-md-* or d-sm-none allow you to control visibility and

How do I add Bootstrap to my project?

There are a couple of ways to add Bootstrap to your project:

Download and Include: You can download the Bootstrap CSS and JavaScript files from the official Bootstrap website (https://getbootstrap.com) and include them in your project's directory. Then, link to these files in your HTML using <link> and <script> tags.
```

<link rel="stylesheet" href="path/to/bootstrap.min.css">


<script src="path/to/bootstrap.min.js"></script>
```

CDN: Alternatively, you can use a content delivery network (CDN) to include Bootstrap in your project. This method is often faster because it leverages cached files from popular servers.

<!-- Add this in the <head> section for CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- Add this before the closing </body> tag for JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

Can I customize Bootstrap's styles?

Yes, you can customize Bootstrap's styles to match your project's design. You can override Bootstrap's default CSS rules by writing your own CSS code. To ensure your custom styles don't get overridden by Bootstrap's CSS, add your styles after Bootstrap's CSS in your HTML file.

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/custom-styles.css">

In your custom-styles.css file, you can target specific elements using their class names or IDs and apply your custom styles.

All Tutorials