Skip to main content
pelatihan
.org
Learn. Practice. Grow.
Category
EN
Sign in
Sign up
Menu
Bootstrap Curriculum: 5 Chapters, 54 Lessons — pelatihan.org
Home
/
Catalog
/
Bootstrap
/
Curriculum
Curriculum
Bootstrap Curriculum
Learn Bootstrap online with 54 structured lessons, code examples, and 270 quiz questions.
54 lessons
5 chapters
270 questions
Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.
01
Bootstrap 5 Tutorial
32 lessons
01
BS5 HOME
Bootstrap 5 is a free, open-source CSS front-end framework for building responsive, modern web interfaces quickly. This framework provides a ready-made set of classes for layout,…
02
BS5 Get Started
There are two main ways to use Bootstrap 5: upload it over a CDN or download the files and store them locally. For simple projects, the CDN is the fastest because it's enough to…
03
BS5 Containers
Containers are the main packaging element of Bootstrap that provide padding and focusing content according to a particular breakpoint. There are three types: .container with a…
04
BS5 Grid Basic
Bootstrap uses a flexible 12-column grid system with a combination of .row and .col. Each row is a container of its columns, while the width of the column is determined by the…
05
BS5 Typography
Bootstrap provides built-in typographic styles for larger headings h1 through h6, paragraphs, and text lead with a darker color. Utility classes such as .display-1 to .display-6…
06
BS5 Colors
Bootstrap provides a class of color utilities such as .text-primary, .text-success, and .bg-danger that can be used for text, background, or components. Its primary colors…
07
BS5 Tables
The .table class gives the basic style of the Bootstrap table such as cell padding, row bounding, and neat typography. Variations such as .table-striped, .table-bordered,…
08
BS5 Images
Bootstrap creates a responsive image with .img-fluid that applies 100 percent max-width and automatic high so that the image does not overlap. Classes such as .rounded and…
09
BS5 Jumbotron
Jumbotron, a large gray-packed box to display the hero section, has been removed from Bootstrap 5. Its replacement is to use built-in utilities such as .p-5, .bg-body-tertiary,…
10
BS5 Alerts
Alert is a built-in Bootstrap message box to display brief information to users. The basic class .alert is blended with the theme colors such as .alert-success or .alert-danger,…
11
BS5 Buttons
Bootstrap embellishes buttons through the .btn class in color combinations such as .btn-primary or .btn-outline-secondary. The button size is set to .btn-lg and .btn-sm, while…
12
BS5 Button Groups
.btn-group combines several buttons in a row of close together without any distance between them, usually used for action toolbars or alternative options. Compare this to…
13
BS5 Badges
A badge is a small label that displays a number or category such as the number of notifications on the menu. The basic class is .badge with the color theme such as .bg-primary or…
14
BS5 Progress Bars
The progress bar displays the progress of completion of a task in the form of a colored horizontal bar. The .progress element is the container whereas the .progress-bar in it…
15
BS5 Spinners
Spinners are rotating loading indicators available in two styles: ring-shaped .spinner-border and expanding-shaped .spinner-grow. Its size is set by the -sm variant and its color…
16
BS5 Pagination
Pagination displays a sequence of page numbers so that users can move content gradually. Bootstrap structures use <ul class="pagination"> containing <li class="page-item"> with…
17
BS5 List Groups
List groups make a neat list of items, which can be static, linked, or richly-contented. The basic class is .list-group on the packaging and .list-group-item on each item.…
18
BS5 Cards
A card is a versatile content box to display images, titles, text, and links in a consistent style packaging. Its structure starts with .card, then .card-body for content, and…
19
BS5 Dropdowns
The dropdown displays a hidden menu that appears when the user clicks on the trigger. In Bootstrap 5, a dropdown is created with the data-bs-toggle="dropdown" attribute on the…
20
BS5 Collapse
Collapse hides or displays content blocks seamlessly, commonly used for accordion menus or FAQ sections. The triggers use data-bs-toggle="collapse" and data-bs-target that points…
21
BS5 Navs
Navs organize navigation links in a row, such as tabs or menu tabs. The basic class is .nav with .nav-item and .nav-link, while the tab or pill display is specified .nav-tabs and…
22
BS5 Navbar
Navbar is a responsive navigation bar that can contain brands, links, dropdowns, and search forms. The basic class is .navbar with .navbar-expand-lg so that the menu is straight…
23
BS5 Carousel
Carousels or sliders display alternating slides, which can be automatically or manually moved. The main element .carousel with .carousel-inner contains .carousel-item, then the…
24
BS5 Modal
A capital is an overlay of dialog that displays information or forms at the top of a page. Bootstrap 5's capital is made up of .modal containing .modal-dialog and .modal-content,…
25
BS5 Tooltip
A tooltip is a small box containing text that appears when a user scrubs an element with a cursor. Activate with data-bs-toggle="tooltip", define the position through…
26
BS5 Popover
Popovers are similar to tooltip but can contain longer headings and text bodies, and usually appear when clicked. Activate it with data-bs-toggle="popover", then fill it through…
27
BS5 Toast
Toast is a small notification that appears in the corner of the screen to give short feedback, usually automatically disappearing after a few seconds. The .toast element is…
28
BS5 Scrollspy
Scrollspy monitors the scroll position of the page and marks the navigation links that correspond to the section being viewed, suitable for long documentation. By the way, add…
29
BS5 Offcanvas
Offcanvas is a sliding panel that is hidden outside the screen and appears when requested, often used for side menus on mobile devices. These components are similar to collapses…
30
BS5 Utilities
Bootstrap 5 provides a class of ready-to-use utilities for general needs such as distance (.m-* and .p-*), display (.d-none), text (.fw-bold), and color (.bg-*). Utility can be…
31
BS5 Dark Mode
Bootstrap 5.3 supports dark mode by default through data-bs-theme="dark" attributes placed on <html> or a specific section of the page. Just add those attributes and the…
32
BS5 Flex
The flex utility Bootstrap makes it easier to set up flexboxes without writing manual CSS, such as .d-flex to enable flex containers and .justify-content-center to focus content.…
02
Bootstrap 5 Forms
7 lessons
01
BS5 Forms
Form Bootstrap embellishes input controls such as text, email, and textarea with the .form-control class. The radio and checkbox options use .form-check, the linked labels use…
02
BS5 Select Menus
<select> is given Bootstrap style with class .form-select, not .form-control, so that the arrow and tip display is typical of dropdown. The size is set to .form-select-sm or…
03
BS5 Checks and Radios
Checkboxes and radios are packed with class .form-check to have consistent distance and arrangement. The .form-check-inline class composes several options in a row, while…
04
BS5 Range
The input range or slider is given Bootstrap style with class .form-range, resulting in a slider with an attractive pointer circle. The minimum, maximum, and step values are set…
05
BS5 Input Groups
Input groups combine text or buttons with inputs in a neat line, such as the prefix @ on a username or the send button at the end of a column. Its structure uses .input-group…
06
BS5 Floating Labels
Floating labels make the label appear to float above the filling column when the user fills or focuses, saving space while remaining informative. By the way, wrap <input> and…
07
BS5 Form Validation
Bootstrap form validation works by adding the required attribute to the control and then displaying a successful or failed style based on the .was-validated class on <form>.…
03
Bootstrap 5 Grid
9 lessons
01
BS5 Grid System
The Bootstrap grid consists of a container, row, and column that work together to form a responsive layout. Containers limit the maximum width, row wrap the column, and the…
02
BS5 Stacked/Horizontal
On a small screen, bootstrap columns are inherently stacked vertically. To have columns adjacent (horizontal) only on a particular screen, add a class with a breakpoint such as…
03
BS5 Grid XSmall
Column classes without breakpoint prefixes such as .col-6 apply to all screen sizes, including the smallest screen (extra small). This is the basic mobile-first layout: first,…
04
BS5 Grid Small
Breakpoint small (sm) applies to screens with a minimum width of 576 pixels, e.g. mobile phones in landscape orientation. The small column class is written .col-sm-6 and is only…
05
BS5 Grid Medium
The breakpoint medium (md) is active starting at 768 pixels screen width, generally marking the tablet upwards. Classes like .col-md-6 make columns adjacent only to that size,…
06
BS5 Grid Large
The breakpoint large (lg) is active starting at 992 pixels, suitable for small laptop and desktop screens. The .col-lg-* class makes the column adjacent to this size and its…
07
BS5 Grid XLarge
The extra large (xl) active breakpoint starts at 1200 pixels, intended for large desktop screens. The .col-xl-* class sets the display when the screen width reaches 1200px…
08
BS5 Grid XXL
Breakpoint xxl is the largest point on the Bootstrap 5 grid, active starting from a screen width of 1400 pixels upward with a maximum container of 1320 pixels. The .col-xxl-*…
09
BS5 Grid Examples
This page collects examples of commonly used grid applications, such as two, three, four columns, as well as sidebar layouts and main content. These patterns become fast…
04
Bootstrap 5 Other
5 lessons
01
BS5 Basic Template
The built-in Bootstrap 5 template provides a starting point for pages that already contain basic HTML structures, meta viewports, and CSS and JS links. There's a regular template…
02
BS5 Editor
The Bootstrap Editor allows you to write and run HTML and CSS Bootstrap code directly in the browser without creating a project file. The code changes can be seen immediately on…
03
BS5 Syllabus
The Bootstrap syllabus maps the material studied in sequence, from the basics of installation, typography, color, shape, then interactive components, to advanced grid and utility…
04
BS5 Study Plan
A study plan sets up Bootstrap materials into a daily schedule so that progress can be measured, such as one topic per day for several weeks. Each session should incorporate a…
05
BS5 Interview Prep
Bootstrap interview preparation focuses on conceptual questions such as the meaning of containers, grid 12 columns, breakpoint, and the differences between versions 4 and 5.…
05
Bootstrap 5 Ref
1 lessons
01
All Classes
The reference page contains a list of all Bootstrap 5 classes and their functions, ranging from layout utilities, colors, text, spacing, to component classes such as .btn, .card,…