BootstrapHow-ToBeginner · 3 min read

How to Create Outline Button in Bootstrap Easily

To create an outline button in Bootstrap, use the btn class combined with btn-outline-* where * is the color like primary, secondary, etc. For example, <button class="btn btn-outline-primary">Button</button> creates a blue outlined button.

📐

Syntax

Bootstrap outline buttons use the btn base class plus an outline variant class btn-outline-*. Replace * with a color name like primary, secondary, success, danger, warning, info, light, or dark.

btn: Base button styling
btn-outline-primary: Blue outline button
btn-outline-danger: Red outline button

html

<button class="btn btn-outline-primary">Primary Outline</button>

Output

A button with a blue border and blue text on a transparent background

💻

Example

This example shows three outline buttons with different colors: primary (blue), success (green), and danger (red). They have a transparent background and colored border and text.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Outline Buttons Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <button type="button" class="btn btn-outline-primary me-2">Primary</button>
    <button type="button" class="btn btn-outline-success me-2">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
  </div>
</body>
</html>

Output

Three horizontally aligned buttons with blue, green, and red outlines and text on a white background

⚠️

Common Pitfalls

Common mistakes when creating outline buttons include:

Forgetting to include the btn base class, which results in no button styling.
Using btn-outline without a color suffix, which is invalid.
Mixing btn-outline-* with solid button classes like btn-primary, which causes style conflicts.

html

<!-- Wrong: Missing btn class -->
<button class="btn-outline-primary">No Base Class</button>

<!-- Wrong: Missing color suffix -->
<button class="btn btn-outline">No Color</button>

<!-- Wrong: Mixing outline and solid -->
<button class="btn btn-primary btn-outline-danger">Conflicting Classes</button>

<!-- Correct -->
<button class="btn btn-outline-primary">Correct Outline Button</button>

Output

Only the last button appears as a proper blue outline button; others have no or broken styling

📊

Quick Reference

Class	Description
btn	Base button class required for all buttons
btn-outline-primary	Blue outline button
btn-outline-secondary	Gray outline button
btn-outline-success	Green outline button
btn-outline-danger	Red outline button
btn-outline-warning	Yellow outline button
btn-outline-info	Light blue outline button
btn-outline-light	White outline button (use on dark backgrounds)
btn-outline-dark	Black outline button

✅

Key Takeaways

Use the btn class with btn-outline-* to create outline buttons in Bootstrap.

Replace * with a valid color name like primary, success, or danger.

Always include the btn base class to apply button styles correctly.

Do not mix outline classes with solid button classes to avoid style conflicts.

Outline buttons have transparent backgrounds with colored borders and text.