📓3.1: Using the Bootstrap Framework

Table of Contents

New Unit! Use a GitHub Template for class notes:

  1. Go to the public template repository for our class: BWL-CS HTML/CSS/JS Template
  2. Click the button above the list of files then select Create a new repository
  3. Specify the repository name: CS1-Unit-3-Notes
  4. Click

    Now you have your own personal copy of this starter code that you can always access under the Your repositories section of GitHub!

  5. Now on your repository, click and select the Codespaces tab
  6. Click Create Codespace on main and wait for the environment to load, then you’re ready to code!
  7. 📝 Take notes in this Codespace during class, coding along with the instructor.

Developing Responsive Websites

🥾 Bootstrap is a popular front-end framework for developing responsive and mobile-first websites.

image

Responsive
Websites that automatically scale between devices — whether the device is a mobile phone, tablet, laptop, desktop computer, screen reader, etc.
Mobile-First
Websites that are primarily designed for mobile devices, then scales up from there (as opposed to being designed first for desktop, then trying to scale it down to mobile devices)

What is Bootstrap?

Bootstrap provides a collection of CSS and JavaScript-based design templates for layout, typography, forms, buttons, navigation, and other reusable components. You are free to use whichever Bootstrap components you choose, while adding your own on top. There are thousands of websites out there that are built on Bootstrap, but with their own design.

Bootstrap can be used to build websites of any scale, from small blogs to large corporate websites. Organizations that use Bootstrap include NASA, FIFA, Newsweek, VOGUE and many more.

Why Use Bootstrap?

  • Ease of Use: Prebuilt styles and components.
  • Responsiveness: Automatic adjustment to different screen sizes.
  • Consistency: Uniform design across devices and browsers.
  • Customizability: Override or extend styles as needed.
  • Fast Development: Reusable components save time.

The simplest way to load/use Bootstrap is by including its CDN link in your HTML file.

📥 A CDN (Content Delivery Network) is a distributed network of servers strategically located in different parts of the world to deliver content, such as files, images, and scripts, to users faster and more reliably.

  1. Include the CDN link to Bootstrap’s CSS code in the <head> section: 
        
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  2. To use interactive elements like carousels (slideshows) and modals (pop-up windows), include the CDN link to Bootstrap’s JavaScript code too: 
        
     <!-- Bootstrap JS (optional) -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap Tutorial

Containers

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport. Bootstrap requires a containing element to wrap elements and contain its Grid System (more on this later on in the tutorial). Bootstrap’s container classes were created specifically for this purpose.

Bootstrap 5 includes three different container types:

Fixed Containers

A fixed container is a (responsive) fixed width container. As you resize your browser, its width remains intact, until it passes a certain breakpoint (as specified by you — more on that next), at which time it will resize to the new width for that break point.

<div class="container"></div>

Fluid Containers

A fluid container spans the full width of the viewport. It will expand and contract fluidly as you resize the browser. This is in contrast to the fixed width container which will appear to “jump” to the new size as you pass a given break point.

<div class="container-fluid"></div>

Typography

Color Utilities

Grid System

Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.

Images

Buttons

Components

Acknowledgement

Content on this page is adapted from Bootstrap 5 Tutorial - Quackit and the Bootstrap Documentation.