Getting Started with Bootstrap

Install the most popular CSS framework in two lines

Learn how to install Bootstrap on your website so you can start to use all the Bootstrap tools.

💡 The Concept

Getting started with Bootstrap takes just two lines in your HTML, and your project immediately has access to a full design system. Bootstrap is a free CSS and JavaScript framework originally built by the Twitter team. It gives you a complete system for building responsive, mobile-first websites without writing all the CSS yourself. You get a powerful grid for columns, pre-styled buttons and forms, a hamburger navigation, modals, and much more.

Grid System

Grid systems are the magic of a responsive Internet. They create vertical columns and horizontal rows that define the spacing, alignment, and positioning of content. The key benefit is that they stack on mobile, which allows web designers to design full-width websites that also look good on a smartphone. You can see the magic of a grid system in the graphic below:

Bootstrap columns display in rows on a desktop and stack on mobile.

We’ll learn how to use Bootstrap columns in the next lesson. But before we can do that, we need to install Bootstrap.

Installing Bootstrap

Bootstrap 5 needs two things: a CSS file in your <head> and a JavaScript file before your closing </body> tag.

In the <head>, above your own stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Before </body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

That is it, just two lines. Bootstrap 5 no longer requires jQuery or any other separate files.

Exercise: Try It Yourself

Step 1. Add the Bootstrap CSS CDN link to your website, above your own stylesheet. Double-check that your own stylesheet comes after the Bootstrap link.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Step 2. Add the Bootstrap JS CDN link just before the closing </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Step 3. Check your website. We haven’t used any Bootstrap classes yet, but you may see some minor changes to your default CSS.

Your website <head>should look something like this. The key is that your stylesheet is below the Bootstrap stylesheet.

Screenshot of a website <head> showing the placement of the Bootstrap stylesheet. The key is that is must be above your stylesheet.

This is the correct placement for the Bootstrap script tag:

This screenshot shows the correct placement of the Bootstrap <script>, which is after the closing </footer> and above the closing </body>.

💡 If you are making a website template: Add the Bootstrap CDN links to your website template. See the full website template guide for reference.

❓ Frequently Asked Questions

What can I do with Bootstrap?

Quite a lot. Beyond the responsive grid and the styling, Bootstrap ships with ready-made components you can drop straight into your page, including styled forms, buttons, modals, a mobile hamburger navigation, and accordions. You build these with simple classes instead of writing the CSS and JavaScript yourself. You can see these components in action in the <a href=”https://webdevstudents.com/lessons/what-else-can-bootstrap-do/”>What Else Can Bootstrap Do?</a> lesson.

Do I still need to write my own CSS if I use Bootstrap?

Yes, and you will want to. Bootstrap gives you a solid starting point with its grid, buttons, forms, and other components, but it does not know your colors, fonts, or brand. You add your own stylesheet after the Bootstrap link so your custom rules load last and can override or extend the defaults. Most real projects use Bootstrap for structure and layout, then layer their own CSS on top to make the site feel unique.

Why are there two Bootstrap files, a CSS file and a JavaScript file?

They do different jobs. The CSS file holds all the styling and layout rules, which is the grid, the spacing, the colors, and the look of buttons and forms. The JavaScript file powers the interactive components such as dropdown menus, the mobile hamburger navigation, modals, and carousels. The CSS goes in the head so styles load early, and the script goes just before the closing body tag so the page content loads first.

Do I need the JavaScript file if I only want the grid and styling?

No. The grid system, spacing, colors, buttons, and most utility classes are pure CSS, so they work with just the stylesheet link. You only need the JavaScript bundle when you use interactive components like the collapsing navbar, dropdowns, modals, tabs, or carousels. It is common to include it anyway so everything is ready when you reach for those pieces later.

Does Bootstrap 5 still need jQuery?

No. Older versions of Bootstrap relied on jQuery, but Bootstrap 5 was rewritten to use plain JavaScript, so jQuery is no longer required. The single bundle file you link before the closing body tag includes everything the components need. This is one reason Bootstrap 5 is lighter and a little faster than earlier versions.

Will Bootstrap change how my page looks before I add any classes?

Yes, a little. Bootstrap includes a reset called Reboot that normalizes default browser styles, so even before you use a single Bootstrap class you may notice changes to fonts, spacing, headings, and link colors. This is expected, and it gives every Bootstrap project a clean, consistent baseline to build on. As you add your own stylesheet and Bootstrap classes, you take full control of the look from there.

★ Key Takeaways

Bootstrap is one of the most popular front-end frameworks in the world. This lesson showed you how to link Bootstrap to a project and start using its built-in styles and components. Next, you will learn about Bootstrap columns, which are the backbone of Bootstrap’s layout system. Columns let you create responsive multi-column layouts with very little code.

Next Lesson: Bootstrap Columns

← Back to Bootstrap and Frameworks Lessons

← Back to All Lessons