BootstrapHow-ToBeginner · 4 min read

How to Use Bootstrap with Custom CSS for Styling

To use Bootstrap with custom CSS, first include Bootstrap's CSS file in your HTML, then add your own CSS file after it. This way, your custom styles will override Bootstrap's defaults when needed, allowing you to customize the look while keeping Bootstrap's layout and components.

📐

Syntax

Include Bootstrap CSS first, then your custom CSS file in the HTML <head>. Use selectors in your CSS to override Bootstrap styles.

<link href="bootstrap.css" rel="stylesheet">: Loads Bootstrap styles.
<link href="custom.css" rel="stylesheet">: Loads your custom styles after Bootstrap.
Use CSS selectors with equal or higher specificity to override Bootstrap.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap with Custom CSS</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="custom.css" rel="stylesheet">
</head>
<body>
  <!-- Content here -->
</body>
</html>

💻

Example

This example shows a Bootstrap button styled with custom CSS to change its color and font size.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Button with Custom CSS</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Custom CSS overrides Bootstrap button styles */
    .btn-primary {
      background-color: #ff6600; /* bright orange */
      font-size: 1.5rem; /* larger text */
      border: none;
    }
  </style>
</head>
<body class="p-3">
  <button class="btn btn-primary">Custom Styled Button</button>
</body>
</html>

Output

A large orange button labeled 'Custom Styled Button' centered on a white background with padding.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap with custom CSS include:

Loading custom CSS before Bootstrap, so Bootstrap overrides your styles.
Using selectors with lower specificity, so your styles don't apply.
Not considering Bootstrap's utility classes that may conflict with your styles.
Overriding Bootstrap classes globally without care, causing unexpected layout issues.

Always load your CSS after Bootstrap and use specific selectors or custom class names.

html

<!-- Wrong order: custom CSS before Bootstrap -->
<link href="custom.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">

<!-- Right order: Bootstrap first, then custom CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

📊

Quick Reference

Tips for using Bootstrap with custom CSS:

Always include Bootstrap CSS before your custom CSS.
Use custom class names or IDs to avoid conflicts.
Use browser DevTools to inspect and test CSS overrides.
Use !important sparingly to force overrides if needed.
Consider using Bootstrap's utility classes for quick customizations.

✅

Key Takeaways

Load Bootstrap CSS before your custom CSS file to ensure your styles override Bootstrap's.

Use specific CSS selectors or custom classes to safely customize Bootstrap components.

Avoid overriding Bootstrap styles globally to prevent layout issues.

Use browser DevTools to check which styles apply and debug conflicts.

Leverage Bootstrap utility classes for simple style changes without custom CSS.