Bootstrap Tutorial: Examples, Components, Classes, and Basics

Learn everything from installation to advanced components. Learn how to use the Bootstrap grid system, responsive Bootstrap classes, and pre-built Bootstrap components to build mobile-first websites quickly and efficiently without writing extensive custom CSS.

Varun Saharawat27 May, 2026

Creating a responsive website from scratch can take hours and often leads to layout problems on different screens. If making your site look good on mobile is a challenge, Bootstrap can help.

This open-source framework makes web development easier by giving you a set of pre-styled elements. In this article, you will see how to use Bootstrap tutorial tools to build modern, fast websites that work well on any device or browser.

What is Bootstrap?

Bootstrap was first created at Twitter and is now the world’s most popular open-source front-end toolkit. It’s a set of CSS and JavaScript files that help developers build responsive, mobile-first websites. Since it’s free and available on GitHub, it has a large and active community.

Using Bootstrap saves you a lot of time. Rather than writing lots of media queries, you can use its built-in features, like Bootstrap basics, to handle layouts. It also makes sure your website looks the same on Chrome, Firefox, and Safari without extra work.

Bootstrap Setup and Installation

You can add Bootstrap to your project in two main ways: by downloading the files to your computer or by using a Content Delivery Network (CDN). Most people use the CDN because it loads files from a nearby server, which makes your site faster.

To start using Bootstrap basics, you must include the following in your HTML file:

The CSS link is inside the <head> section.
The JavaScript bundles (including Popper.js) are just before the closing </body> tag.
The HTML5 doctype and the viewport meta tag to ensure proper rendering on mobile devices.

Using the Bootstrap CDN

A CDN is the quickest way to start your project. Just copy the latest stylesheet and script links from the official Bootstrap docs. If someone has already visited another site using the same CDN, the files are already saved in their browser, so your site loads even faster.

Downloading Files Locally

If you want to work offline or have more control, you can download the CSS and JS files. After downloading, put them in your project folder and link to them in your HTML using relative paths.

Bootstrap Grid Layout System

The layout system is the core of Bootstrap. It uses containers, rows, and columns to arrange your content. Built with Flexbox, it’s fully responsive, so your layout changes automatically based on screen size.

The Bootstrap grid system is based on a 12-column layout. You can group these columns together to create wider sections or keep them narrow for sidebars.

Class Prefix	Device Type	Screen Width
.col-	Extra Small	< 576px
.col-sm-	Small	≥ 576px
.col-md-	Medium	≥ 768px
.col-lg-	Large	≥ 992px
.col-xl-	Extra Large	≥ 1200px

The system requires three main elements to function:

Containers: These provide a means to centre and horizontally pad your site’s contents.
Rows: These act as wrappers for columns and ensure your columns are aligned properly.
Columns: These are the immediate children of rows and carry the actual content.

Bootstrap Examples

To understand how these pieces fit together, let’s look at a few common implementation scenarios. These Bootstrap examples demonstrate how quickly you can assemble a functional webpage.

Creating a Responsive Navbar

A standard navbar uses the .navbar class combined with .navbar-expand-lg to determine when the menu should collapse into a "hamburger" icon on mobile devices. You can add themes like .navbar-dark with .bg-dark for a modern look.

Building a Simple Contact Form

Forms in this framework are incredibly easy to style. By applying the .form-control class to inputs and textareas, they automatically become full-width and gain a sleek, modern focus state. You can group labels and inputs using the .mb-3 class for consistent vertical spacing.

Bootstrap Utility Classes for Styling

One of the biggest advantages of this framework is the massive library of utility classes. These allow you to apply styles like margins, padding, colours, and borders directly to HTML elements without writing a single line of custom CSS.

Using Bootstrap classes helps maintain a clean codebase. Instead of creating a new CSS class for every minor adjustment, you simply add a utility name to your HTML tag.

Spacing: Classes like mt-3 (margin-top) or pb-5 (padding-bottom) manage white space.
Typography: Use text-centre, font-weight-bold, or text-uppercase to style text quickly.
Colours: Apply text-primary, bg-success, or btn-danger to change element colours.
Borders: Add rounded, border-top, or rounded-circle for different edge styles.

Bootstrap Components for Websites

Components are the building blocks of your interface. These are pre-designed UI elements that come with built-in styling and functionality. By using these Bootstrap components, you ensure that your buttons, forms, and navigation bars follow modern design standards.

Commonly used components include:

Navbar: A responsive navigation header that includes branding, links, and forms.
Buttons: Standardised styles for various actions, including outline versions and different sizes.
Cards: A flexible content container that can include images, headers, and footers.
Modals: Pop-up dialogues for notifications or user inputs.
Alerts: Contextual feedback messages like "Success" or "Error" banners.

Bootstrap Advanced Features and Customisation

To become an expert, you need to look beyond simple styling and understand how the framework handles advanced interactions. This involves using JavaScript plugins that are included in the bundle to manage dropdowns, carousels, and tooltips.

A complete Bootstrap guide highlights the importance of the "Mobile-First" philosophy. This means you should always design for the smallest screen first and then use breakpoint classes to adjust the layout for desktops. This approach ensures that your site is accessible to the widest possible audience, as mobile traffic continues to dominate web usage.

Customising the Framework

While the default look is great, many developers want a unique design. You can override the default CSS by creating your own stylesheet and linking it after the framework's CSS. Alternatively, you can use Sass variables to change the global theme colours, fonts, and spacing before compiling the files.

Utility API

The framework includes a Utility API that allows you to generate your own utility classes. This is useful for large-scale projects where you need specific, repeatable styles that aren't included in the default build. It keeps your project lightweight by only generating the CSS you actually need.