6.6.3 CSS Frameworks | Web Application Development

A CSS framework is a ready-made library of classes and components (grid, buttons, navbars, cards, forms, modals) that speeds up development and gives a consistent responsive design. Examples: Bootstrap (most popular, prescribed text), Tailwind CSS (utility classes), Foundation, Bulma.

Bootstrap quick start (via CDN link, no installation):

HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Bootstrap Demo</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
</head>
<body>

  <nav class='navbar navbar-expand-md navbar-dark bg-dark'>
    <div class='container'>
      <a class='navbar-brand' href='#'>MyShop</a>
      <button class='navbar-toggler' data-bs-toggle='collapse' data-bs-target='#menu'>
        <span class='navbar-toggler-icon'></span>
      </button>
      <div class='collapse navbar-collapse' id='menu'>
        <ul class='navbar-nav ms-auto'>
          <li class='nav-item'><a class='nav-link' href='#'>Home</a></li>
          <li class='nav-item'><a class='nav-link' href='#'>Cart</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class='container my-4'>
    <div class='row g-3'>
      <div class='col-12 col-md-6 col-lg-4'>
        <div class='card'>
          <div class='card-body'>
            <h5 class='card-title'>Product</h5>
            <p class='card-text'>Short description.</p>
            <a href='#' class='btn btn-primary'>Add to cart</a>
          </div>
        </div>
      </div>
      <!-- repeat the col div for more cards -->
    </div>
  </div>

  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
</body>
</html>

Bootstrap essentials

Container: .container (fixed width centred), .container-fluid (full width).
12-column grid: rows contain columns. col-12 col-md-6 col-lg-4 means full width on phones, half on tablets, one third on desktops. Breakpoint prefixes: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px).
Utilities: spacing m-3, p-2, mt-4, mx-auto; text text-center, fw-bold; colour bg-light, text-danger; display d-none d-md-block, d-flex, justify-content-between.
Components: btn btn-success, form-control, table table-striped, alert alert-warning, badge, modal, carousel, pagination (useful in Unit 13).

class='col-12 col-md-6 col-lg-4': full width on phones, half on tablets, one third on desktops

Trade-offs: frameworks save time but add file size and make sites look alike. Learn plain CSS first so you can customise and debug frameworks.

Project (Unit 6): Responsive portfolio website. Make three pages (Home, About, Contact) sharing one external stylesheet. Requirements: semantic layout, a Flexbox navigation bar that collapses to a vertical list below 600px, a card section that moves from one to three columns, hover effects, one use of ::before or ::after, and a Bootstrap version of the Contact page for comparison. Test using Chrome DevTools device mode (Ctrl+Shift+M).

Check yourself. The questions for this part are on the 6.7 Review Questions page, with answers to check your work.