Introduction

Bootstrap is a popular front-end framework for building responsive, mobile-first websites and applications. It provides a set of predefined CSS classes and JavaScript components that can be used to quickly build a user interface.

Grid System

Bootstrap uses a 12-column grid system to create a responsive layout that adjusts to different screen sizes. The grid is divided into a container, row, and column elements, and columns can be nested and combined to create complex layouts.

Container

• .container: A fixed-width container

• .container-fluid: A full-width container that spans the entire width of the viewport

Row

• .row: A horizontal group of columns

Columns

• .col-*: A column with a fixed width, where * is a number from 1 to 12

• .col-*-*: A column with a variable width, where the first * is the breakpoint (e.g. xs, sm, md, lg, xl) and the second * is a number from 1 to 12.

Typography

Bootstrap includes a variety of styles for headers, paragraphs, and other text components.

Headings

• .h1, .h2, .h3, .h4, .h5, .h6: Headings with different sizes

Paragraphs

• .lead: A larger, bolder paragraph

• .text-*: Text with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, muted, white)

Buttons

Bootstrap provides a set of predefined button styles and sizes.

Styles

• .btn: A default button style

• .btn-*: A button with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, link)

Sizes

• .btn-lg: A large button

• .btn-sm: A small button

• .btn-xs: An extra small button

Forms

Bootstrap provides styles for creating forms and form elements, including input fields, select lists, checkboxes, radio buttons, and more.

Form Group

• .form-group: A container for form elements

Input Fields

• .form-control: A styled input field

• .form-control-*: A styled input field with a size or color, where * is a size (e.g. lg, sm) or color (e.g. primary, secondary, success, danger, warning, info, light, dark)

Select Lists

• .form-control: A styled select list

Checkboxes and Radio Buttons

• .form-check: A styled checkbox or radio button

Tables

Bootstrap provides styles for creating tables and table elements, including headings, rows, and cells.

Table

• .table: A basic table

• .table-*: A table with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, striped, bordered, hover, sm, responsive)

Headings

• .thead-*: A table heading with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Rows

• .table-*: A table row with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, active)

Cells

• .table-*: A table cell with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Images

Bootstrap provides styles for displaying images and thumbnails.

Images

• .img-fluid: A responsive image that scales with the width of the container

• .img-*: An image with a shape or style, where * is a shape or style (e.g. rounded, circle, thumbnail)

Alerts

Bootstrap provides styles for creating alerts and alert messages.

Alerts

• .alert: A basic alert

• .alert-*: An alert with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Cards

Bootstrap provides styles for creating cards, which are flexible containers for displaying content in a variety of formats.

Cards

• .card: A basic card

• .card-*: A card with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Card Headings

• .card-header: A heading for a card

• .card-header-*: A heading with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Card Body

• .card-body: The content area of a card

Card Footer

• .card-footer: A footer for a card

• .card-footer-*: A footer with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Navigations

Bootstrap provides styles for creating navigation bars, menus, and tabs.

Navigation Bars

• .navbar: A navigation bar

• .navbar-*: A navigation bar with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, dark, fixed-top, fixed-bottom, sticky-top)

Navigation Links

• .nav-link: A navigation link

• .nav-link-*: A navigation link with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, active)

Navigation Menus

• .nav: A navigation menu

• .nav-*: A navigation menu with a color or style, where * is a color or style (e.g. tabs, pills, fill, justified)

Navigation Tabs

• .nav-tabs: A tabbed navigation menu

• .nav-pills: A pill-style navigation menu

Carousels

Bootstrap provides styles and JavaScript components for creating carousels, which are slideshow components that rotate through a series of images or other content.

Carousel

• .carousel: A carousel

• .carousel-*: A carousel with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Slides

• .carousel-item: A slide in a carousel

Modals

Bootstrap provides styles and JavaScript components for creating modal dialogs, which are overlays that can be used to display content or prompt the user for input.

Modal

• .modal: A modal dialog

• .modal-*: A modal dialog with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Modal Header

• .modal-header: The header area of a modal dialog

Modal Body

• .modal-body: The content area of a modal dialog

Modal Footer

• .modal-footer: The footer area of a modal dialog

Popovers

Bootstrap provides styles and JavaScript components for creating popovers, which are small overlays that can be used to display content or prompt the user for input.

Popover

• .popover: A popover

• .popover-*: A popover with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Popover Header

• .popover-header: The header area of a popover

Popover Body

• .popover-body: The content area of a popover

Popover Footer

• .popover-footer: The footer area of a popover

Tooltips

Bootstrap provides styles and JavaScript components for creating tooltips, which are small overlays that can be used to display information or hints.

Tooltip

• .tooltip: A tooltip

• .tooltip-*: A tooltip with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Utility Classes

Bootstrap provides a set of utility classes for controlling layout, spacing, and other styles.

Spacing

• .m*: Margin with a size, where * is a size (e.g. m0, m1, m2, m3, m4, m5)

• .p*: Padding with a size, where * is a size (e.g. p0, p1, p2, p3, p4,p5)

Display

• .d-*: Display with a value, where * is a value (e.g. d-none, d-inline, d-inline-block, d-block, d-table, d-table-cell, d-table-row)

Alignment

• .align-*: Alignment with a value, where * is a value (e.g. align-baseline, align-top, align-middle, align-bottom, align-text-*, align-self-*, where * is a value (e.g. baseline, top, middle, bottom, stretch))

Text

• .text-*: Text with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark, muted, white, black-50, white-50)

• .font-weight-*: Font weight with a value, where * is a value (e.g. font-weight-normal, font-weight-bold, font-weight-bolder, font-weight-lighter)

Background

• .bg-*: Background with a color or style, where * is a color or style (e.g. primary, secondary, success, danger, warning, info, light, dark)

Bootstrap Resources

Here are some additional resources for learning more about Bootstrap:

• The official Bootstrap documentation

• Bootstrap Tutorial on w3schools