Bootstrap Tutorial

Bootstrap is a free and open source front end framework. It gives you ready made CSS and JavaScript parts, like a grid, buttons, forms, cards, menus and popups, so you can build…

In this chapter we make a first web page with Bootstrap 5. You only need a text editor and a browser. Bootstrap has a CSS file and a JavaScript file, and we…

There are several ways to add Bootstrap to a project. Choose the one which fits your work: a CDN is the quickest, and npm is the best for bigger projects with a…

A container is the basic building block of the layout in Bootstrap. It holds your content, puts it in the center of the page and gives it some space on both sides….

The grid system is the most important part of Bootstrap. It uses a 12 column layout and flexbox to make responsive pages. You divide the width of the row in up to…

After the basics, the grid has many options for spacing, alignment, order and nesting. Here are the most useful ones. Gutters The gutter is the space between the columns. Use g-* (both…

Bootstrap has a good looking default for text. It uses the system font stack, so the text looks natural on every computer and phone. It also gives classes for headings, sizes, weights…

Bootstrap has a set of theme colors which are used for buttons, alerts, badges and utilities. They are: primary, secondary, success, danger, warning, info, light and dark. You can use them with…

Images should fit in their container and not break the layout on a small screen. Bootstrap gives a few classes to make images responsive and to change their shape. In the examples,…

HTML tables have no style by default. Add the class .table and Bootstrap gives a clean look with the right spacing. Then you can add more classes for different styles. Basic table…

Buttons are made with the class .btn, and a color class like .btn-primary. You can use it on a button, an a or an input tag. Button colors Outline buttons Sizes Full…

Alerts show a message to the user, like a success, a warning or an error. They are made with the class .alert and a color class. Alert colors Always add role=”alert”, so…

A badge is a small label, for a count, a status or a tag. In Bootstrap 5 it is made with .badge and a text-bg-* color class. Badge colors In Bootstrap 4…

A card is a flexible box with a border, which can have an image, a header, a body and a footer. It is used for products, blog posts, profiles and dashboard boxes….

A list group is a nice way to show a list of items, like a menu, a list of messages or settings. It is made with .list-group and .list-group-item. Basic list group…

The .nav component is the base for menus, tabs and pills. You can use it alone, or make tabs with content panels. Base nav Tabs, pills and underline Fill and justify .nav-fill…

The navbar is the top menu of a website. In Bootstrap it is responsive: on a small screen it collapses into a button (a hamburger icon) which opens the menu, and on…

A dropdown shows a list of links or actions when the user clicks a button. It needs the Bootstrap JavaScript bundle (it includes Popper, which places the menu in the right position)….

Breadcrumb and pagination help the user to move in a website. A breadcrumb shows the path of the current page, and pagination shows a list of page numbers. Breadcrumb The last item…

Bootstrap styles the form fields so they look the same in all browsers. Add the classes to the normal HTML form elements. In Bootstrap 5, the old .form-group is removed. Use margin…

Input groups and floating labels are two helpful form parts. Input groups attach text or buttons to a field, and floating labels put the label inside the field and move it up…

Bootstrap helps to show the result of the validation: green fields for valid and red fields for invalid values, with feedback messages. It uses the validation of the browser (HTML attributes like…

A modal is a dialog box which opens above the page. It is used for confirmations, forms and messages. The page behind it is darkened, and the user must close the modal…

The collapse plugin shows and hides a part of the page with a smooth animation. The accordion is a group of collapse panels where only one is open at a time. Collapse…

A carousel is a slideshow of images or content. It has previous and next buttons, small indicators and it can change slides by itself. A carousel with controls and indicators Click the…

A tooltip is a small label which shows when the user moves the mouse over an element or focuses it. A popover is a bigger box with a title and some content….

An offcanvas is a panel which slides in from the left, right, top or bottom of the screen. It is good for a mobile menu, a shopping cart, filters or a sidebar….

A toast is a small message in a corner of the screen, like “Saved” or “New message”. It shows for some seconds and then goes away. Toasts are opt-in: you must show…

Progress bars show how much of a task is done, and spinners show that something is loading, and the time is not known. Progress bar The width of .progress-bar is the percent….

Spacing classes are the most used Bootstrap utilities. You can add margin (outside space) and padding (inside space) to any element, without writing CSS. The naming Size Value (with the default font…

Bootstrap has a class for almost every flexbox property. You can make a flexible layout without writing CSS. First add .d-flex to the container, and then use the other classes. Direction Justify…

Utilities are small classes which do one thing, like d-none (hide), w-50 (width 50%) or shadow. They let you change the look of an element directly in the HTML, without a new…

Since Bootstrap 5.3 there is a built in dark mode. You switch it with the attribute data-bs-theme=”dark” (or “light”). All components change their colors by themselves, because Bootstrap uses CSS variables for…

Bootstrap Icons is a free library of over 2000 SVG icons, made by the Bootstrap team. It is not part of the main Bootstrap file, so you must add it separately. The…

The Bootstrap components which need JavaScript (modal, dropdown, collapse, carousel, tabs, tooltip and others) are written in plain JavaScript. Bootstrap 5 does not need jQuery. You can use them in two ways:…

The default Bootstrap look is the same on many sites. You can change colors, fonts, sizes and radius to match your brand. There are three ways, from simple to powerful. 1. Override…

Many websites still use Bootstrap 4. If you want to upgrade, or to read an old tutorial, you must know what changed. This chapter lists the main differences. The class names changed…

In this chapter we put the parts together and build a small landing page: a navbar, a hero section, three feature cards, a call to action and a footer. Everything uses only…

This is a short list of the most used Bootstrap 5.3 classes and attributes. The links go to the full chapters. Layout Class Meaning .container, .container-fluid, .container-md Containers (details) .row, .col, .col-md-6,…