# How to Make Bootstrap Text Bold Using Tailwind CSS Utility Classes

> Make Bootstrap text bold with Tailwind CSS font-bold utility class. Achieve bold text without custom CSS for a faster workflow.

- Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Use the `font-bold` utility class in Tailwind CSS to apply a 700 font weight, achieving the same bold appearance as Bootstrap without writing custom CSS.**

If you are migrating from Bootstrap or searching for **bootstrap text bold** solutions, Tailwind CSS provides a robust set of font-weight utilities that eliminate the need for custom stylesheets. The `tailwindlabs/tailwindcss` repository implements these utilities through a theme-driven architecture that generates CSS custom properties at build time.

## Understanding the `font-bold` Utility

The `font-bold` class is the primary mechanism for making text bold in Tailwind CSS. Unlike Bootstrap’s `fw-bold` class, Tailwind uses semantic naming that maps directly to CSS `font-weight` properties.

### How the CSS is Generated

When you use `font-bold`, Tailwind generates CSS that leverages a custom property for flexibility:

```css
.font-bold {
  --tw-font-weight: 700;
  font-weight: var(--tw-font-weight);
}

```

This approach allows the weight value to be overridden through the theme configuration or CSS custom properties while maintaining a consistent API.

### Source Code Implementation

The implementation spans two critical files in the `packages/tailwindcss/src` directory:

1.  **[`default-theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/default-theme.ts)** – Defines the default mapping of weight names to numeric values. The `bold` key maps to `'700'` within the `fontWeight` theme object.
    
2.  **[`utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.ts)** – Contains the core generation logic that transforms theme entries into utility classes. For each `fontWeight` entry, it creates the `.font-{name}` rule with the `--tw-font-weight` variable and `font-weight` declaration.

The test suite in **[`utilities.test.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.test.ts)** confirms the generated CSS output matches the expected variable-based structure, while **[`intellisense.test.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/intellisense.test.ts)** verifies that editors correctly suggest `font-bold` during autocompletion.

## Implementing Bootstrap Text Bold Patterns with Tailwind

To replicate **bootstrap text bold** behavior using Tailwind’s utility-first approach, apply the `font-bold` class directly to your HTML elements.

### Basic Usage

```html
<p class="font-bold">
  This text renders with a 700 font weight, equivalent to Bootstrap's bold style.
</p>

```

### Combining with Typography Utilities

Tailwind allows you to compose styles without writing custom CSS:

```html
<h1 class="text-3xl font-bold text-gray-900 leading-tight">
  Bold Heading with Bootstrap-like Styling
</h1>

```

### Responsive Boldness

Unlike Bootstrap, which requires breakpoint-specific classes or custom media queries, Tailwind provides responsive variants out of the box:

```html
<p class="font-normal md:font-bold">
  Normal weight on mobile, bold on medium screens and up.
</p>

```

## Customizing Font Weights

If the default 700 weight does not match your specific **bootstrap text bold** requirements, you can override the theme without touching CSS.

### Configuration Example

Extend your [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) to redefine the `bold` value:

```javascript
module.exports = {
  theme: {
    extend: {
      fontWeight: {
        bold: '800', // Override default 700 with 800
      },
    },
  },
};

```

After rebuilding, the same `font-bold` class will now apply an 800 weight instead of 700, allowing you to align with Bootstrap’s specific bold definitions or design system requirements.

## Summary

-   **Use `font-bold`** to apply a 700 font weight without custom CSS, achieving the same visual result as Bootstrap’s bold text classes.
-   The utility is generated from the **`fontWeight` theme** in [`default-theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/default-theme.ts) and processed by the utility generator in [`utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.ts).
-   Tailwind uses a **CSS custom property** (`--tw-font-weight`) to allow runtime overrides while maintaining a consistent class API.
-   You can customize the bold weight in **[`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js)** by extending the `fontWeight` theme, changing the value associated with the `bold` key.

## Frequently Asked Questions

### What is the difference between Bootstrap's bold classes and Tailwind's `font-bold`?

Bootstrap typically uses `fw-bold` (font-weight bold) to apply a 700 weight, whereas Tailwind uses `font-bold`. Both achieve the same visual result by default, but Tailwind generates the style using a CSS custom property (`--tw-font-weight`) defined in [`utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.ts), allowing for easier theme customization without modifying HTML.

### Can I use `font-bold` with responsive prefixes?

Yes. Tailwind supports responsive variants out of the box. You can use classes like `md:font-bold` or `lg:font-bold` to apply bold text only at specific breakpoints. This is handled by the utility generator in [`utilities.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/utilities.ts) which creates the breakpoint-specific rules based on your configuration.

### How do I change the default bold weight in Tailwind?

You can override the default 700 weight by extending the `fontWeight` theme in your [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) file. For example, setting `bold: '800'` will cause the `font-bold` class to apply an 800 weight instead. This customization is processed by the theme system in [`default-theme.ts`](https://github.com/tailwindlabs/tailwindcss/blob/main/default-theme.ts) and applied through the utility generator.

### Is `font-bold` the same as `font-semibold`?

No. `font-bold` applies a weight of 700 by default, while `font-semibold` applies 600. Tailwind provides a full scale of font-weight utilities (`font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`) generated from the `fontWeight` theme defined in the source code.