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.
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
</body> tag to optimize your web pages' performance.
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
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.
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 (
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
How do I get started with Bootstrap?
To get started with Bootstrap, follow these steps:
- 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-fluidto create a grid container. Then, use
<div>elements with classes like
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
d-sm-noneallow 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:
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.
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.
custom-styles.css file, you can target specific elements using their class names or IDs and apply your custom styles.