Rapid UI Development with Bootstrap

Hello! Welcome to the final lesson in our module on styling with CSS.

In our last session, you did an excellent job learning how to create a responsive two-column layout from scratch using CSS Flexbox. You now have a solid understanding of how to control the arrangement of elements on a page. While building layouts yourself gives you maximum control, in professional development, speed is often just as important.

Today, we will learn how to integrate a CSS framework like Bootstrap to apply pre-built styles for rapid UI development. Think of a framework as a giant toolkit of pre-designed and pre-coded user interface elements. Instead of writing all the CSS yourself, you can use these ready-made parts to assemble a professional-looking website much faster. This approach is perfect for quickly building a prototype of your AI writing assistant.

Take a look at the image below. It shows various components like buttons, a navigation bar, and a pop-up dialog. A framework like Bootstrap provides all of these, fully styled and ready to use.

Example UI Components from a CSS Framework — This image showcases a variety of pre-styled components—like buttons, navigation elements, and dialogs—that are available in a CSS framework.

By the end of this lesson, you will have refactored our application's UI using Bootstrap, making it look more polished with significantly less custom CSS code.

What is a CSS Framework?

A CSS framework provides a foundation of pre-written CSS and JavaScript code to help you build user interfaces quickly and consistently. The main benefits are:

Speed: You don't have to "reinvent the wheel" for common elements like buttons, forms, or navigation bars.
Responsiveness: Most frameworks come with a powerful grid system (often built with Flexbox!) that makes creating responsive layouts easy.
Consistency: It ensures a consistent look and feel across all parts of your application and on different web browsers.

Bootstrap is the world's most popular CSS framework, and it's an excellent tool for a developer's toolkit.

Integrating Bootstrap into Your Project

The easiest way to start using Bootstrap is by linking to its files hosted on a CDN (Content Delivery Network). A CDN is a network of servers around the world that deliver files to users quickly. By adding a couple of lines to your HTML, you can load Bootstrap's CSS for styling and its JavaScript for interactive components.

Let's watch a short video that explains what Bootstrap is and how to get it set up using a CDN.

Bootstrap 5 Crash Course | Website Build & Deploy

This clip from the 'Bootstrap 5 Crash Course' by Traversy Media clearly explains the purpose of a framework and shows how to use the CDN links for a quick setup.

Watch from 01:55 to 04:51. Focus on understanding what a CSS framework offers and see how simple it is to add the CDN links to an HTML file.

Now, let's get this into our project.

Open your index.html file.
Copy the <link> tag for the CSS and place it inside your <head> section, just before your own style.css link.
Copy the <script> tag for the JavaScript and place it at the end of your <body> section.

Your index.html should look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Writing Assistant</title>
  
  <!-- 1. Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  
  <!-- 2. Your custom CSS (comes after Bootstrap) -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Your page content goes here -->

  <!-- 3. Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

By placing your style.css link after the Bootstrap link, you ensure that your own custom styles can override Bootstrap's defaults if needed.

Styling the "Bootstrap Way"

With Bootstrap, you primarily style your page by adding pre-defined class names to your HTML elements. There are two main types of classes: utility classes and component classes.

Utility Classes: These are simple, single-purpose classes for things like spacing, color, and text alignment. For example, instead of writing padding: 20px; in your CSS, you might add the class p-4 to your HTML element (p for padding, 4 for the size).
Component Classes: These are used to build more complex elements like cards, buttons, or forms. For example, adding class="btn btn-primary" will turn a standard <button> into a nicely styled blue button.

Let's see this in action by refactoring the app we built in the last lesson.

Practical Application: Rebuilding Our UI with Bootstrap

We will now update our HTML and CSS to use Bootstrap's classes. This will demonstrate how quickly we can create a more polished design.

Step 1: Updating the Layout with the Grid System

Bootstrap's grid system is built on Flexbox and is extremely powerful. It works with a system of rows and columns.

A <div class="row"> acts as the flex container.
Elements inside with classes like <div class="col"> or <div class="col-md-6"> act as the flex items.

The col-md-6 class is particularly interesting. It means: "On medium-sized screens (md) and larger, this column should take up 6 out of 12 available units of width (i.e., 50%). On smaller screens, it will stack automatically." This is how Bootstrap handles responsiveness!

Let's update index.html. We'll replace our custom container and section divs with Bootstrap's grid.

New index.html body:

<body>
  <!-- Bootstrap's container class centers content and sets a max-width -->
  <div class="container mt-5">
    
    <!-- A row will contain our columns. It's a flex container. -->
    <div class="row g-4"> <!-- g-4 adds a gap between columns -->

      <!-- Left Column -->
      <div class="col-md-6">
        <div class="p-4 bg-light rounded shadow-sm">
          <h1>AI Writing Assistant</h1>
          <textarea id="user-input" class="form-control" rows="10" placeholder="Enter your text here..."></textarea>
          <button class="btn btn-primary mt-3">Analyze Text</button>
        </div>
      </div>

      <!-- Right Column -->
      <div class="col-md-6">
        <div class="p-4 bg-light rounded shadow-sm">
          <h2>Analysis</h2>
          <!-- We use Bootstrap's 'card' component for the result box -->
          <div id="analysis-result" class="card">
            <div class="card-body">
              Your results will be shown here.
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

Notice all the new classes:

container, row, col-md-6: For the main layout.
mt-5, p-4, g-4: Spacing utilities (margin-top, padding, gap).
bg-light, rounded, shadow-sm: Styling utilities for background, borders, and shadows.
form-control: Styles the <textarea> to look great.
btn btn-primary: Styles the <button>.
card, card-body: Creates a styled container for our results.

Test your understanding!

In the code above, we used col-md-6. Based on the explanation, what do you think col-md-12 would do? What about col-lg-4?

Show answer

col-md-12 would make the column take up the full width (12 out of 12 units) on medium screens and larger.
col-lg-4 would make the column take up one-third of the width (4 out of 12 units) on large (lg) screens and larger. It would stack on medium and small screens.

Step 2: Simplifying the CSS

Because Bootstrap is doing most of the work, our style.css file becomes much simpler! We can remove almost everything we wrote in the last two lessons.

New style.css content:

body {
  background-color: #e9ecef; /* A light grey background for the whole page */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1, h2 {
  color: #003366; /* A custom color for our headings */
}

/* We still need to style our custom IDs and elements if needed */
#analysis-result .card-body {
  min-height: 220px;
  color: #6c757d; /* A muted text color for the placeholder */
}

After saving both files, refresh your browser. Your application should now have a clean, modern, and responsive layout, all thanks to Bootstrap! Compare the small amount of CSS we wrote to what we had before. The difference is huge.

To see how developers use Bootstrap's documentation to find and implement components like the grid and cards, watch this short clip.

Learn How to Code Using Bootstrap 5 Tutorial 2023!

This video from 'Coding With JayBird' provides a great example of finding grid and card components on the Bootstrap website and putting them into a project.

Watch from 08:20 to 10:47. Notice how the creator first sets up the .row and .col structure and then pastes the .card component's code inside the columns. This is a very common workflow.

Conclusion

Excellent work today! You've just learned a skill that will dramatically increase the speed at which you can build professional-looking web applications. By leveraging a framework like Bootstrap, you can focus more on your application's functionality instead of spending hours on custom styling.

Key Takeaways:

CSS frameworks like Bootstrap provide pre-built styles and components to accelerate UI development.
You can easily integrate Bootstrap using CDN links for its CSS and JavaScript files.
Styling is done by adding pre-defined classes to your HTML elements.
Bootstrap's responsive grid system (.row, .col-*) is a powerful tool for creating layouts that adapt to any screen size.
Components like .card and form controls like .form-control and .btn provide polished elements with minimal effort.

This lesson concludes our module on CSS. You now know how to style individual elements, create layouts from scratch with Flexbox, and rapidly build UIs with a framework.

In our next module, we'll dive into JavaScript. We will finally make our page interactive by learning how to select HTML elements and respond to user actions like button clicks. This is where your application will start to come to life

Recommended resources