TEXT CLASSES

In Bootstrap, text classes are utility classes that help you style text quickly. They control color, alignment, weight, decoration, wrapping, and more.

1. Text Color

This is primary text.

This is success text.

This is danger text.

This is muted text.

2. Text Alignment

Left aligned text.

Center aligned text.

Right aligned text.

3. Text Weight & Style

Bold text

Normal weight text

Light weight text

Italic text

Normal (non-italic) text

4. Text Decoration

Underlined text

Line-through text

No text decoration

5. Text Transformation

LOWERCASE TEXT

uppercase text

this is capitalized text

6. Text Wrapping and Breaking

This text will not wrap to the next line.

AReallyLongUnbreakableWordThatWillBreakInSmallContainers

COLOR CLASSES

In Bootstrap, text classes are utility classes that help you style text quickly. They control color, alignment, weight, decoration, wrapping, and more.

1. Text Color Classes

These apply color to text.

Primary text

Secondary text

Success text

Danger text

Warning text

Info text

Light text on dark background

Dark text

Muted text

White text on dark background

2. Background Color Classes

These apply color to backgrounds. Use text classes with these to ensure readability.

Primary background

Secondary background

Success background

Danger background

Warning background

Info background

Light background

Dark background

3. Border Color Classes

These apply color to borders. You can combine with border utility classes.

Primary border

Danger border

Success border

4. Opacity Variations (for text or background)

75% opacity primary text

50% opacity background

BREAKPOINTS

In Bootstrap, breakpoint classes are used to make your design responsive. These classes allow you to change styles like layout, spacing, text alignment, display, and more based on screen width (breakpoints).

Most Common Breakpoint Classes & Examples

1. Grid System (Responsive Columns)

Column 1

Column 2

Column 3

On extra-small: full-width

On small: 2 columns

On medium and up: 3 columns

2. Display Classes

Visible on md and larger, hidden below md

d-none: hide by default

d-md-block: show as block on md and larger

3. Text Alignment

Left on xs, center on sm, right on lg and up

4. Spacing Utilities (Padding / Margin)

Padding changes with screen size

p-2: default

p-sm-4: from sm and up

p-md-5: from md and up

5. Flex Direction

Item 1

Item 2

Stack vertically on small screens

Switch to horizontal layout from md and up

CONTAINER

.container

This is a responsive fixed-width container.

.container-fluid

This is a full-width fluid container.

Responsive Containers

100% width until md (≥768px), then fixed width.

GRID

What is Bootstrap Grid?

Bootstrap's grid system uses rows and columns to layout and align content. It’s built on a 12-column layout and is responsive using breakpoints like sm, md, lg, etc.

Basic Grid Class Structure

Column 1

Column 2

.container — holds the grid

.row — horizontal wrapper for columns

.col — columns that auto-size evenly

1. Equal Width Columns

2. Responsive Columns (Fixed Width at Breakpoints)

Column A

Column B

At sm (≥576px): 2 equal columns

At md (≥768px): 4/12 and 8/12

3. Specific Column Widths

4 of 12

8 of 12

4. Nested Grid

Parent Column

Child 1

Child 2

Another Column

5. Responsive Layout (Different on Each Screen Size)

Responsive Column

IMAGE

1. .img-fluid

Makes the image responsive (scales with parent).

2. .rounded

Applies rounded corners

3. .rounded-circle

Creates a circular image.

4. .img-thumbnail

Gives image a border, padding, and rounded corners.

5. Image Alignment with Utility Classes

Use text alignment or float utilities:

TABLE

Bootstrap Table Classes with clean and simple examples.

Basic Table Class

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com

1. Striped Rows

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com

2. Bordered Table

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com

3. Hover Effect

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com

4. Dark Table

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com

5. Responsive Table (Horizontal Scroll on Small Screens)

#	Name	Email
1	Jane Doe	jane@example.com
2	John Smith	john@example.com