Bootstrap Class Reference

Overview

Bootstrap is a powerful front-end framework that allows developers to build responsive and mobile-first websites quickly and easily. The Bootstrap class reference provides a comprehensive set of classes for various components, layout options, utilities, and icons.

Bootstrap Layout

Container

The container class provides a means to create a responsive fixed width or fluid width layout. It plays a crucial role in the Bootstrap grid system.

Grid System

The Bootstrap grid system allows you to divide your web page into a series of columns. It consists of a row and column-based layout with a maximum of 12 columns.

Class	Description
.row	This class creates a new row for columns.
.col	A column with equal width across all screen sizes.
.col-sm	A column that will stack on smaller screens and be size-specific on larger screens.
.col-md	A medium column that adjusts its size according to the device width.

Columns

Columns are nested within rows, allowing for grid layouts of different configurations. For example, you can specify column widths using classes like .col-4 which will create a layout with three columns side-by-side.

Responsive Breakpoints

Bootstrap includes responsive breakpoints which allow you to customize the grid based on screen size:

• sm: ≥576px
• md: ≥768px
• lg: ≥992px
• xl: ≥1200px
• xxl: ≥1400px

Bootstrap Components

Alerts

Alerts are very useful for providing feedback messages to users. They are created using the .alert class along with contextual classes like .alert-primary.

Badge

Badges are used to highlight information. They can be added to buttons or links for improved visibility:

New

Breadcrumb

Breadcrumbs are great for website navigation and user orientation:

Button Group

Button groups allow you to group a set of buttons together:

Buttons

Buttons are essential for user actions. You can style them using classes like .btn, .btn-primary, etc.

Danger Button

Card

Cards are flexible content containers that can include various components like images, titles, and text:

Carousel

A carousel is a slideshow for cycling through elements:

Collapse

The collapse component allows you to toggle the visibility of content:

Toggle

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more:

List Group

List groups are a flexible and powerful component for displaying simple lists:

• Cras justo odio
• Dapibus ac facilisis in
• Current list item

Modal

Modals are streamlined, dialog prompts used to collect user input:

Launch demo modal

Navbar

Navbars are responsive containers that wire your content into a unified navigation structure:

Pagination

Pagination helps to separate content into pages:

Popover

Popovers provide contextual information for elements:

Popover button

Progress

Progress bars serve to indicate progress of a process:

Responsive Embed

Responsive embeds allow you to easily embed media (like videos) responsively:

Spinner

Spinners are a way to show that a process is loading:

Toast

Toasts are lightweight notifications that display brief messages:

Tooltips

Tooltips are small pop-up boxes that provide additional information when hovering over an element:

Tooltip button

Bootstrap Utilities

Borders

Utilize border classes to easily add borders to elements:

Colors

Bootstrap includes contextual colors for text and backgrounds:

Display

Control the visibility of your elements using display utilities:

Flex

Utilize flex utilities to control the alignment and spacing of elements:

Float

Floating elements can be accomplished as shown below:

Floating image!

Position

Control the positioning of elements using position utilities:

Shadows

Add shadows to your elements for a lifted effect:

Sizing

Size your elements by controlling their width and height:

Spacing

Add margin and padding easily using spacing utilities:

Text

Use typography utilities to style the text within your elements:

Centered text!

Visibility

Hide or show elements based on screen sizes:

Bootstrap Icons

Bootstrap provides a variety of icons. To add an icon, simply add the Bootstrap Icons classes to an i tag or span element:

Bootstrap Extensions

Custom Forms

Enhance your forms with Bootstrap’s custom styling options including validation and custom controls:

Email address

We’ll never share your email with anyone else.

Submit

Conclusion

Bootstrap’s class reference provides developers with the tools needed to build responsive, mobile-friendly websites. This framework allows for a wide array of components, utilities, and responsive features that simplify web development for both beginners and experienced developers alike.

Frequently Asked Questions

What is Bootstrap?

Bootstrap is a front-end framework that helps you create responsive websites easily.

Do I need to know HTML and CSS to use Bootstrap?

Yes, basic knowledge of HTML and CSS is recommended for effective use of Bootstrap.

Can I customize Bootstrap?

Yes, Bootstrap is highly customizable, allowing you to modify styles and components as needed.

Is Bootstrap responsive?

Yes, Bootstrap is built with responsiveness in mind and provides responsive utilities for various screen sizes.

How do I include Bootstrap in my project?

You can include Bootstrap by adding CDN links in your HTML file or by downloading the Bootstrap files to your local project.