Bootstrap Tutorial

Bootstrap is a front-end framework that helps you build mobile responsive websites more quickly and easily. Originally developed by Twitter, it now powers everything from web applications to WordPress themes. Notable users include Spotify and LinkedIn, among others. The framework is completely free, versatile, and intuitive.

With Bootstrap, you can build complex web pages from standard HTML and customize them to your needs. It also comes with additional functionality such as carousels, buttons, modals, and more.

Last, but not least, Bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to create web pages that are responsive, mobile-first, and compatible with all modern browsers.

P.S. While Bootstrap is awesome, it’s not a perfect option for complete beginners. If you have absolutely no experience using markup, alternatively, you can use a website builder or WordPress to create a website.

How to Create a Website Using Bootstrap (Table of Contents):

What is Bootstrap?
Step 1: Setup and overview
Step 2: Design your landing page
FAQ

Total time to create a website using Bootstrap: 3-4 hours. Skill level: Beginner to Intermediate

What Is Bootstrap?

Bootstrap is an open-source front-end framework created to help developers build responsive, mobile-first websites faster. Instead of writing all your CSS and JavaScript from scratch, Bootstrap gives you a library of pre-built components and utility classes you can drop into your HTML.

Here’s what makes it so useful:

12-column grid system – Makes it easy to create layouts that adapt to any screen size, from phones to wide desktop monitors.
Pre-designed components – Buttons, navigation bars, cards, modals, forms, and more are ready to use out of the box.
Responsive by default – Everything is built mobile-first, so your site looks good on all devices without extra work.
Customizable – You can override Bootstrap’s default styles with your own CSS or use Sass variables for deeper customization.
JavaScript plugins – Interactive features like dropdowns, tooltips, carousels, and modals are included and work without additional libraries.

The current major version is Bootstrap v5.3.8, which was a significant update from Bootstrap 4. If you’ve seen older Bootstrap tutorials that mention jQuery as a requirement, that’s no longer the case – Bootstrap v5.3.8 uses plain JavaScript instead.

Bootstrap Tutorial Step 1: Setup and Overview

In order to use Bootstrap, you first need to integrate it into your development environment, aka web page. For that, you have two different possibilities: load it remotely or download and use Bootstrap locally. However, for both, you first need something to load it into.

A Note on Bootstrap v5.3.8 vs. Bootstrap 4

This tutorial uses Bootstrap v5.3.8, the current stable version of the framework. If you’ve followed older Bootstrap tutorials, here are the key differences you should know about:

No more jQuery – Bootstrap v5.3.8 dropped jQuery as a dependency. All JavaScript functionality now runs on vanilla JavaScript.
Updated data attributes – Data attributes now use a bs namespace. For example, data-toggle became data-bs-toggle, and data-target became data-bs-target.
New utility classes – Bootstrap v5.3.8 added a utility API, new spacing and layout helpers, and RTL (right-to-left) support.
Dropped Internet Explorer support – If you need to support IE, you’ll need to stick with Bootstrap 4. For everyone else, Bootstrap v5.3.8 is the way to go.
Popper.js is bundled – If you use bootstrap.bundle.min.js (recommended), Popper.js is included automatically. No need to load it separately.

With that context out of the way, let’s get started.

1. Create an HTML Page

As a first step in this tutorial, we will create a simple HTML template as a base where we will use Bootstrap. For that, the first thing you want to do is create a folder on your computer or server for the project files. In this case, we will simply call it bootstrap. Here, create a new text file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then paste the code below into it.

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Bootstrap Tutorial Sample Page</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">


	</head>


	<body>

	</body>


</html>

Don’t forget to save your file before moving on.

2a. Load Bootstrap via CDN

Bootstrap consists mainly of style sheets and scripts. As such, they can be loaded in the header and footer of your web page like other assets such as custom fonts. The framework offers a CDN (content delivery network) access path for that. You can find it on the Bootstrap download page.

To get Bootstrap’s CSS into your page, simply paste the code below into the <head> section of your template.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

Be sure to take the actual link from the official download page in order to make sure you are using the latest version of Bootstrap.

When you now save the file, any browser that opens it will automatically load the Bootstrap assets.

Using the remote method is a good idea as many users will already have the file in the cache of their browser from loading other Bootstrap-based websites. If that is the case, they won’t have to reload it when coming to your site, leading to faster page loading time. As a consequence, this is the recommended method for live sites.

However, for experimenting and development, or if you want to be independent of an Internet connection, you can also get your own copy of the files. This is what we’re doing for this Bootstrap tutorial because it also results in less code we need to post.

2b. Host Bootstrap Locally

An alternative way to set up Bootstrap is to download it to your hard drive and use the files locally. You find download options in the same place as the links to the remote version. Be sure to get the compiled CSS and JS files. You don’t need the source files.

Once you have finished downloading it, unzip the file and copy its contents into the same directory as index.html. After that, you can load the Bootstrap CSS into your project like this:

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

You will notice that this includes the file path at which to find the Bootstrap file. In your case, make sure your path corresponds to your actual setup. For example, the names of the directories might differ if you downloaded a different version of Bootstrap.

3. Load Bootstrap JavaScript

To get the full functionality of Bootstrap, you also need to load the Bootstrap JavaScript bundle. This single file includes both Bootstrap’s JS and Popper.js (needed for tooltips, popovers, and dropdowns), so you only need one script tag.

Important: Unlike Bootstrap 4, Bootstrap v5.3.8 does not require jQuery. You only need the Bootstrap bundle file.

Place the following <script> tag right before the closing </body> tag. You can call it remotely like this:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Or locally like so:

<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

We recommend using bootstrap.bundle.min.js rather than bootstrap.min.js because the bundle includes Popper.js. Without Popper, components like dropdowns, tooltips, and popovers won’t work properly.

4. Put it All Together

If you have followed the steps above correctly, you should end up with a file that looks like this for the remote solution:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tutorial Sample Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>

  <body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

And here is what you should have for the version that loads all assets locally:

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>Bootstrap Tutorial Sample Page</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

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

    </head>

    <body>


        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

    </body>


</html>

Notice how much simpler this is compared to Bootstrap 4 – no jQuery, no separate Popper.js file. Just one CSS link and one JavaScript file.

If that looks like what’s in your file and you saved your work, you are now ready to move on to the next step.

Bootstrap Tutorial Step 2: Design Your Landing Page

Alright, that was, admittedly, a lot of preparation work. However, it wasn’t very hard, was it? Plus, now the fun begins.

At the moment, when you open your sample site in a browser, you should simply see a blank page. Time to change that. In order to teach you Bootstrap, in this tutorial we will build a landing page with different elements so we can show you many use cases of the front-end framework.

1. Add a Navigation Bar

The first thing we want to do is add a navigation bar to the top of the page. Doing so allows your visitors to get around your site and discover the rest of your pages.

For that, we will use the navbar class. This is one of the default elements of Bootstrap, which you will see a lot of in the course of this tutorial. It creates a navigation bar that is responsive by default and will automatically collapse on smaller screens. It also offers built-in support for adding branding, color schemes, spacing, and other components.

You can start by posting this just after the <body> tag:

<nav class="navbar navbar-expand-md">

	<div class="container-fluid">

		<a class="navbar-brand" href="#">Logo</a>

		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">

			<span class="navbar-toggler-icon"></span>

		</button>

		<div class="collapse navbar-collapse" id="main-navigation">

			<ul class="navbar-nav">

				<li class="nav-item">

					<a class="nav-link" href="#">Home</a>

				</li>

				<li class="nav-item">

					<a class="nav-link" href="#">About</a>

				</li>

				<li class="nav-item">

					<a class="nav-link" href="#">Contact</a>

				</li>

			</ul>

		</div>

	</div>

</nav>

Some Explanation of the Code

The markup above is probably full of unknown CSS classes. Here is what they mean:

navbar-expand-md – This denotes at which point the navigation bar expands from vertical or hamburger icon to a full-size horizontal bar. In this case, we have set it to medium screens, which, in Bootstrap, is anything greater than 768px.
container-fluid – In Bootstrap v5.3.8, it’s recommended to wrap your navbar content inside a container. We use container-fluid here so it spans the full width.
navbar-brand – This is used for your website branding. You can also include a logo image file here.
navbar-toggler – Denotes the toggle button for the collapsed menu. The piece data-bs-toggle="collapse" defines that this will turn to a hamburger menu. It’s important that you define a data-bs-target with a CSS id (defined by the #) and wrap a <div> with the same name around the actual navbar element. Note the bs namespace in these attributes.
navbar-toggler-icon – As you can probably guess, this creates the icon users click on to open the menu on smaller screens.
navbar-nav – The class for the <ul> list element that holds the menu items. The latter are denoted with nav-item and nav-link.

Why are we explaining this so much?

Because that is the point of Bootstrap. It comes with all of these standards that allow you to quickly create elements with some HTML and CSS. You also don’t have to worry about layout, as everything is already set up within Bootstrap. Plus, it’s all mobile responsive out of the box! Are you beginning to see how helpful this is?

The above is enough to add a navigation bar to your site. However, at the moment, it still looks like very little.

That’s because it doesn’t have a lot of styling attached to it. While you are able to add default colors (for example, by giving the navbar a class like bg-dark and adding data-bs-theme="dark"), we instead want to add our own.

2. Include Custom CSS

Fortunately, if you want to change the default styling, you don’t have to wade through a large library of style sheets and make the changes by hand. Instead, just like with a WordPress child theme, you are able to add your own CSS files which you can use to overwrite existing styling.

For that, simply create a blank file with your text editor and call it main.css. Save it, then add it to the head section of your Bootstrap site like this:

<link rel="stylesheet" type="text/css" href="main.css">

This is the code for a style sheet that resides in the main directory. If you decide to place yours inside the css folder, be sure to include the correct path in the link. Make sure this line comes after the Bootstrap CSS link so your styles can override Bootstrap’s defaults.

From here, you are able to add custom CSS to your site. For example, to style the page background as well as the navigation bar and its elements, you could use markup like this:

body {

    padding: 0;

    margin: 0;

    background: #f2f6e9;

}

.navbar {

    background:#6ab446;

}

.nav-link,

.navbar-brand {

    color: #fff;

    cursor: pointer;

}

.nav-link {

    margin-right: 1em !important;

}

.nav-link:hover {

    color: #000;

}

.navbar-collapse {

    justify-content: flex-end;

}

And here is the result:

Looks better than before, doesn’t it?

11. Create a Two-Column Footer

Alright, we are now getting towards the end of the Bootstrap tutorial. The last thing we want to add to our landing page is a footer section with two columns. By now, this shouldn’t pose much of a problem for you anymore.

<footer class="page-footer">

  <div class="container">

    <div class="row">

      <div class="col-lg-8 col-md-8 col-sm-12">

        <h6 class="text-uppercase font-weight-bold">Additional Information</h6>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>

      </div>

      <div class="col-lg-4 col-md-4 col-sm-12">

        <h6 class="text-uppercase font-weight-bold">Contact</h6>

        <p>1640 Riverside Drive, Hill Valley, California
          <br/>info@mywebsite.com
          <br/>+ 01 234 567 88
          <br/>+ 01 234 567 89
        </p>

      </div>

    </div>

  </div>

  <div class="footer-copyright text-center">&copy; 2026 Copyright: MyWebsite.com</div>

</footer>