Lesson Content

1. Customizing Bootstrap with CSS Overrides

a. Overview

Definition: Modifying Bootstrap’s default styles by writing custom CSS to override existing classes.
Purpose: Tailor the appearance of Bootstrap components to match specific design requirements.

b. Methods of Overriding Bootstrap CSS

Specificity: Write CSS selectors with higher specificity to override Bootstrap styles.
Order of Inclusion: Ensure custom CSS is included after Bootstrap’s CSS in the HTML file.
Using !important: As a last resort, apply !important to force style overrides (not recommended for extensive use).

c. Example: Overriding Button Styles

html
Copy code
<!-- HTML -->
<button class="btn btn-primary custom-btn">Custom Button</button>

<!-- Custom CSS -->
<style>
  .custom-btn {
    background-color: #ff5722;
    border-color: #ff5722;
  }
  
  .custom-btn:hover {
    background-color: #e64a19;
    border-color: #e64a19;
  }
</style>

d. Best Practices

Avoid Overusing !important: It can make debugging and maintenance difficult.
Maintain Consistency: Use consistent naming conventions for custom classes.
Document Changes: Keep track of all customizations for future reference.

2. Customizing Bootstrap with Sass

a. Overview

Definition: Using Sass, a CSS preprocessor, to customize Bootstrap by modifying its Sass variables and leveraging mixins.
Benefits: More efficient and maintainable customization compared to plain CSS overrides.

b. Setting Up Sass with Bootstrap

Install Node.js and npm: Ensure Node.js and npm are installed on your system.
Initialize npm Project:

bash
Copy code
npm init -y

Install Bootstrap and Sass:

bash
Copy code
npm install bootstrap sass

Create a custom.scss File: This file will contain your custom Sass code.

c. Importing Bootstrap into Sass

scss
Copy code
// custom.scss

// Override Bootstrap variables before importing Bootstrap
$primary: #ff5722;
$secondary: #4caf50;
$font-family-base: 'Arial, sans-serif';

// Import Bootstrap's Sass files
@import "node_modules/bootstrap/scss/bootstrap";

// Custom Styles
.custom-card {
  border-radius: 20px;
  background-color: lighten($primary, 40%);
}

.custom-btn {
  @extend .btn;
  background-color: $primary;
  border-color: $primary;
  
  &:hover {
    background-color: darken($primary, 10%);
    border-color: darken($primary, 10%);
  }
}

d. Compiling Sass to CSS

Command:

bash
Copy code
sass custom.scss custom.css

Result: Generates a custom.css file with Bootstrap’s styles overridden by custom variables and styles.

e. Linking Compiled CSS in HTML

html
Copy code
<link rel="stylesheet" href="custom.css">

f. Example: Using Custom Classes in HTML

html
Copy code
<button class="btn custom-btn">Custom Sass Button</button>

<div class="card custom-card">
  <div class="card-body">
    <h5 class="card-title">Custom Themed Card</h5>
    <p class="card-text">This card has a custom border radius and background color.</p>
    <a href="#" class="btn custom-btn">Learn More</a>
  </div>
</div>

3. Theming Concepts

a. Overview

Definition: The process of defining a set of styles and design elements that dictate the look and feel of a website or application.
Purpose: Create a cohesive and branded user experience by consistently applying a theme across all components.

b. Key Theming Elements in Bootstrap

Colors: Primary, secondary, success, danger, warning, info, light, dark.
Typography: Font families, sizes, weights.
Spacing: Margins and paddings.
Borders: Styles, radii, colors.

c. Creating a Custom Theme with Sass

scss
Copy code
// custom-theme.scss

// Define theme variables
$primary: #ff5722;
$secondary: #4caf50;
$font-family-base: 'Helvetica, sans-serif';
$font-size-base: 1rem;
$body-bg: #f8f9fa;

// Import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

// Additional Custom Styles
.navbar-custom {
  background-color: $primary;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #fff;
}

.navbar-custom .nav-link:hover {
  color: lighten(#fff, 20%);
}

d. Compiling and Using the Custom Theme

Compile Sass:

bash
Copy code
sass custom-theme.scss custom-theme.css

Link in HTML:

html
Copy code
<link rel="stylesheet" href="custom-theme.css">

e. Example: Applying Custom Theme in HTML

html
Copy code
<nav class="navbar navbar-expand-lg navbar-custom">
  <a class="navbar-brand" href="#">MyTheme</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#themeNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="themeNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
  </div>
</nav>

4. Best Practices for Customizing Bootstrap

Use Variables: Leverage Bootstrap’s Sass variables for easy and consistent theming.
Maintain Structure: Keep custom styles organized, preferably in separate Sass files.
Test Responsiveness: Ensure customizations do not break Bootstrap’s responsive design.
Stay Updated: Monitor Bootstrap updates to maintain compatibility with custom styles.

Day 11: Customizing Bootstrap with CSS Overrides and Sass Theming