Bootstrap And Tailwind CSS | Lecture 46

Let’s begin with Lecture 46 of the HTML5 & CSS3 series. Customizing Bootstrap & Tailwind CSS – Make It Your Own!. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Understand how to customize Bootstrap using Sass variables
Know how to configure Tailwind CSS to match your theme
Be able to change default colors, fonts, spacing, and more
Create a custom theme that reflects your personal or brand style
Make your website stand out — even when using a framework!

🎨 Why Customize Frameworks?

CSS frameworks like Bootstrap and Tailwind CSS are powerful, but they can make your site look like everyone else’s.

Think of it like this:

If Bootstrap or Tailwind is your paintbrush and canvas , then customization is your unique art style — it makes your site one of a kind!

🛠 Customizing Bootstrap

Bootstrap uses Sass (a CSS preprocessor) to allow easy customization.

Step 1: Customize Bootstrap Colors

You can override Bootstrap’s default variables before importing it.

Example:

// _variables.scss
$primary: #e74c3c;
$secondary: #2980b9;
$body-bg: #f9f9f9;

Then import Bootstrap:

@import "bootstrap/scss/bootstrap";

This changes the entire theme to use your colors!

Step 2: Use Custom CSS to Override Styles

You can also just add your own CSS after Bootstrap to tweak styles.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

In custom.css:

.btn-primary {
    background-color: #27ae60;
    border-color: #27ae60;
}

.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Now your buttons and cards look different from default Bootstrap!

🎨 Customizing Tailwind CSS

Tailwind is highly customizable via its tailwind.config.js file.

Step 1: Install Tailwind (Optional for Customization)

If you’re using Tailwind via CDN, customization is limited.
To customize Tailwind, you need to install it via npm:

npm install -D tailwindcss
npx tailwindcss init

This creates a tailwind.config.js file.

Step 2: Update Tailwind Theme

In tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#e74c3c',
        secondary: '#2980b9',
        accent: '#f1c40f',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      }
    }
  },
  plugins: [],
}

Now you can use:

<div class="bg-primary text-white p-8 font-sans">Custom Theme</div>

💻 Try This: Customize a Bootstrap Card Layout

Let’s build a custom Bootstrap layout that uses your own colors and fonts.

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

custom-bootstrap.html

Step 2: Add This Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Custom Bootstrap Theme</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap @5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #e74c3c;
            --secondary-color: #2980b9;
            --accent-color: #f1c40f;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f9f9f9;
            font-family: var(--font-family);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }

        .card {
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .card-title {
            color: var(--secondary-color);
        }

        .card-text {
            color: #555;
        }
    </style>
</head>
<body>

    <div class="container mt-5">
        <h2 class="text-center mb-4">Custom Bootstrap Theme</h2>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <img src="https://picsum.photos/id/1015/300/200 " class="card-img-top" alt="Card image">
                    <div class="card-body">
                        <h5 class="card-title">Custom Card One</h5>
                        <p class="card-text">This card uses custom colors and styles — not Bootstrap defaults!</p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100">
                    <img src="https://picsum.photos/id/1016/300/200 " class="card-img-top" alt="Card image">
                    <div class="card-body">
                        <h5 class="card-title">Custom Card Two</h5>
                        <p class="card-text">Bootstrap is powerful — but you can make it match your style!</p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100">
                    <img src="https://picsum.photos/id/1018/300/200 " class="card-img-top" alt="Card image">
                    <div class="card-body">
                        <h5 class="card-title">Custom Card Three</h5>
                        <p class="card-text">Tailwind and Bootstrap can be customized — you're not stuck with default styles!</p>
                        <a href="#" class="btn btn-primary">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-5 text-center">
            <a href="index.html" class="btn btn-outline-secondary">Back to Home</a>
        </div>
    </div>

</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve created a fully customized Bootstrap layout — using your own colors, fonts, and styles!

💡 Bonus: Customize Tailwind Colors & Fonts

Let’s create a custom Tailwind layout using the CDN and override some styles.

Step 1: Create a New File

Create a new file named:

custom-tailwind.html

Step 2: Add This Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Custom Tailwind Theme</title>
    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com "></script>
    <!-- Custom Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#e74c3c',
                        secondary: '#2980b9',
                        accent: '#f1c40f',
                        dark: '#2c3e50',
                    },
                    fontFamily: {
                        sans: ['Segoe UI', 'Tahoma', 'sans-serif'],
                    },
                    spacing: {
                        '128': '32rem',
                        '144': '36rem',
                    },
                    borderRadius: {
                        '4xl': '2rem',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 min-h-screen p-10 font-sans">

    <div class="max-w-4xl mx-auto">
        <h2 class="text-4xl font-bold text-center mb-6 text-dark">My Custom Tailwind Page</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-xl font-semibold text-primary mb-2">Custom Card One</h3>
                <p class="text-gray-700">This card uses custom Tailwind colors and fonts.</p>
                <button class="mt-3 bg-secondary hover:bg-primary text-white font-bold py-2 px-4 rounded-full transition duration-300">Click Me</button>
            </div>

            <!-- Card 2 -->
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-xl font-semibold text-primary mb-2">Custom Card Two</h3>
                <p class="text-gray-700">Tailwind is fast — and you can customize it to match your style!</p>
                <button class="mt-3 bg-accent hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">More Info</button>
            </div>

            <!-- Card 3 -->
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-xl font-semibold text-primary mb-2">Custom Card Three</h3>
                <p class="text-gray-700">You can make Tailwind look completely unique — just like Bootstrap!</p>
                <button class="mt-3 bg-dark hover:bg-gray-800 text-white font-bold py-2 px-4 rounded-full transition duration-300">Read More</button>
            </div>
        </div>

        <div class="mt-6 text-center">
            <a href="index.html" class="text-secondary underline">Back to Home</a>
        </div>
    </div>

</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve created a custom Tailwind layout — with your own colors, fonts, and spacing!

💡 Bonus: Add a Custom Button Component

Create reusable styles in your own CSS file or Tailwind config.

In Tailwind:

<button class="px-4 py-2 bg-primary text-white rounded-lg shadow hover:bg-secondary transition duration-300">
    My Custom Button
</button>

In Bootstrap:

Add this to your custom.css:

.custom-btn {
    background-color: #e74c3c;
    border-color: #e74c3c;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: bold;
}

.custom-btn:hover {
    background-color: #c0392b;
}

Then use it:

<a href="#" class="btn custom-btn">My Custom Bootstrap Button</a>

🧪 Try It Yourself!

Build a custom form using your Tailwind theme colors and rounded styles.
Make your Bootstrap cards use a custom font from Google Fonts.
Create a dark mode toggle that changes Tailwind or Bootstrap theme using JavaScript.
Build a custom pricing card with your own colors and spacing.

✅ Summary of What You Learned Today

CONCEPT	DESCRIPTION
Customizing Bootstrap	Use variables or override CSS
Customizing Tailwind	Use`tailwind.config.js`to change colors, fonts, spacing
Theme Colors	Change default colors to match your brand
Custom Components	Make buttons, cards, and forms look unique
Tailwind CDN Customization	You can still customize Tailwind even without installing it via npm
Bootstrap Custom CSS	Override default Bootstrap styles with your own
Responsive Design	Both frameworks support mobile-first design out of the box

🚀 Next Lecture Preview:

In Lecture 47 , we’ll explore CSS Grid and Flexbox in real projects — building a responsive image gallery , card layout , and navigation bar — so you can confidently choose the right tool for the job and apply it in real websites!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series

Bootstrap And Tailwind CSS | Lecture 46

🎯 Objective:

🎨 Why Customize Frameworks?

🛠 Customizing Bootstrap

Step 1: Customize Bootstrap Colors

Example:

Step 2: Use Custom CSS to Override Styles

🎨 Customizing Tailwind CSS

Step 1: Install Tailwind (Optional for Customization)

Step 2: Update Tailwind Theme

💻 Try This: Customize a Bootstrap Card Layout

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Customize Tailwind Colors & Fonts

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Add a Custom Button Component

In Tailwind:

In Bootstrap:

🧪 Try It Yourself!

✅ Summary of What You Learned Today

Najeeb Alam

Related Posts

Introduction to CSS Frameworks | Lecture 45

Responsive Layouts with CSS Grid | Lecture 44

Advanced SVG – Animations | Lecture 43