In this tutorial, we’ll enhance the visuals of our project by integrating Bootstrap 4.0. Learn to download and add Bootstrap, style elements with predefined classes, and create responsive layouts using the Jumbotron component. By the end of this lesson, your HTML structure will look modern and professional.

---

Steps to Bootstrap Your HTML

1. Download and Add Bootstrap

Visit the Bootstrap website and download the source files.

• Extract the files and locate the CSS folder in the dist/ directory.
• Copy the bootstrap.css file (or the minified version, bootstrap.min.css) into your project directory:

public/  
│  
├── css/  
│   └── bootstrap.css  

2. Link Bootstrap to Your HTML

Edit your index.html file to include the Bootstrap CSS file:

<link rel="stylesheet" href="css/bootstrap.css">  

This will allow you to use Bootstrap's predefined styles and components in your HTML.

---

3. Style Buttons with Bootstrap Classes

Transform your existing link into a button by adding the appropriate Bootstrap classes.

Original Link:

<a href="#" class="btn btn-primary">Discover More</a>  

Explanation:

• btn: Adds button styling.
• btn-primary: Applies a primary color style.

Save and refresh your browser. The link will now appear as a styled button.

---

4. Create a Responsive Jumbotron

A Jumbotron component is a standout container often used for hero sections or highlights.

Wrap your existing content in a Jumbotron:

<div class="jumbotron jumbotron-fluid text-center">  
    <div class="container">  
        <h1>Building React User Interfaces</h1>  
        <p>With Bootstrap and SaaS</p>  
        <a href="#" class="btn btn-primary">Discover More</a>  
    </div>  
</div>  

Class Breakdown:

• jumbotron: Creates the large, standout container.
• jumbotron-fluid: Makes the container responsive to screen size.
• text-center: Centers the text horizontally.
• container: Ensures proper spacing and alignment for the content.

---

5. Add a Background Image

Enhance your Jumbotron by adding a background image:

<div class="jumbotron jumbotron-fluid text-center" style="background-image: url('images/background.jpg'); background-size: cover; color: white;">  
    <div class="container">  
        <h1>Building React User Interfaces</h1>  
        <p>With Bootstrap and SaaS</p>  
        <a href="#" class="btn btn-primary">Discover More</a>  
    </div>  
</div>  

Explanation:

• background-image: Specifies the image. Ensure the file path points to the correct location.
• background-size: cover;: Ensures the image covers the entire container.
• color: white;: Changes text color for better contrast.

---

Key Takeaways

• Bootstrap simplifies styling and ensures a consistent, responsive design.
• The Jumbotron component is ideal for creating standout sections.
• Combining Bootstrap classes with inline styles can achieve professional visuals quickly.

In the next lesson, we’ll transition back to JavaScript, enabling hot reloading for our project with Webpack and Webpack-Dev-Server.