Karina Baha

Exploring Bootstrap: Building Modern Responsive Websites. First Part: Introduction to the Grid System

In folder

Last updated on May 11, 2023

In this tutorial series, we will delve into the powerful Bootstrap toolkit, which offers a wide range of tools and components to simplify web development. In this first part, we will explore the concepts of containers, breakpoints, and the Bootstrap grid system, essential for creating responsive and well-structured web layouts. By constructing a product page for a bachelorette party invitation, we will illustrate how these concepts come together in practice.

All parts:

  1.  Exploring Bootstrap: Building Modern Responsive Websites. First Part: Introduction to the Grid System
  2. Exploring Bootstrap: Building Modern Responsive Websites. Second Part: Typography
  3. Exploring Bootstrap: Building Modern Responsive Websites. Third Part: Spacing Utilities
  4. Exploring Bootstrap: Building Modern Responsive Websites. Fourth Part: Border Utilities

Create a New Project Folder

Let’s get started by creating a new project folder. Open your terminal and enter the following command: 

mkdir blissful_beginnings

This command will create a new folder named blissful_beginnings to serve as the root folder for our project.

Next, change into the newly created folder by entering the following command: 

cd blissful_beginnings

Now that we are inside the project folder, let’s create an invitation.html file. Enter the following command: 

touch invitation.html

This command will create a new file named invitation.html which will serve as the main HTML file for our bachelorette party invitation.

Let’s start editing this file:

<!DOCTYPE html>
 <html lang="en">
 <head>
 </head>
 <body>
 </body>
 </html>

This code sets up the basic structure of an HTML document with a doctype declaration, opening and closing html tags, and empty head and body sections. We will fill in the content of these sections as we progress through the tutorial.

Edit the Head Element and Import Bootstrap CSS

Let’s edit the head element of our invitation.html file. Open the file in a text editor and make the following changes: 

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
         crossorigin="anonymous">
     <title>Pink Guitar Last Bash in Nash Bachelorette Weekend Invitation</title>
 </head>

In the head section, we have added the following tags:

  1. The <meta> tag with the name attribute set to "viewport" and content attribute set to "width=device-width, initial-scale=1". This tag ensures that the page is rendered properly on various devices and initial scale is set to 1.
  2.  
  3. The <link> tag with the href attribute pointing to the Bootstrap CSS file hosted on the Bootstrap CDN. This allows us to import and utilize the Bootstrap styles in our project. The crossorigin="anonymous" attribute enables the browser to automatically validate the integrity of the file.
  4.  
  5. The <title> tag with the specified title for our document. This title will be displayed in the browser’s title bar or tab. 

Containers and Breakpoints

 Let’s start adding elements inside the body of the document. The first element is the header. We’ll keep it simple, and we’ll add only a <p> tag with the name of our shop: 

<header>
     <p>Blissful Beginnings</p>
 </header>

One of the most fundamental concepts in the Bootstrap ecosystem is the container. A container contains, pads, and aligns the content. There are three kinds of containers: .container, which is the default, .container-fluid, and .container-{breakpoint}.

The breakpoints used in Bootstrap are:

  1.  Extra Small (<576px)
  2.  Small (≥576px)
  3.  Medium (≥768px)
  4.  Large (≥992px)
  5.  Extra Large (≥1200px)
  6.  Extra extra large (≥1400px)

The infix classes for these breakpoints are None, .sm, .md, .lg, .xl, and .xxl, respectively.

The default .container class is 100% wide on extra small devices (< 576px width), and then its max-width changes at every breakpoint.

The max-width for every breakpoint is as follows: 

  1.  Extra Small (<576px): No max-width
  2.  Small (≥576px): 540px
  3.  Medium (≥768px): 720px
  4.  Large (≥992px): 960px
  5.  Extra Large (≥1200px): 1140px
  6.  Extra Extra Large (≥1400px): 1320px

The .container-fluid spans the entire width of the viewport.

 The .container-{breakpoint} class expands to take up the full width of the screen until the specified breakpoint is reached. Once the breakpoint is reached, the container becomes responsive, and the default max-width applies to all breakpoints higher than the specified breakpoint.

Let’s use the .container-fluid class to wrap the content of the header. Let’s edit the header as follows: 

<header>
     <div class="container-fluid">
         <p>Blissful Beginnings</p>
     </div>
 </header>

The Grid System

Let’s now add, after the header, a main element to the document, where we’ll add an image of our invitation, a title, a description, a price, an add-to-cart form, and shipping information:  

<main>
 </main>

To build our page, we’ll use the Bootstrap grid system. The grid system is built with the flexbox and is mobile-first and responsive. The layout is stacked on extra small and small devices and becomes two columns on medium and up devices.

To use the Bootstrap grid system, we’ll have to wrap the content in a container. Containers center and horizontally pad the content. Inside the main element, let’s add a div with a .container class: 

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

Inside this container, we’ll add rows, which are wrappers for columns. Let’s add our first row: 

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

Every row has 12 columns. The column classes specify how many columns an element will span. 

Let’s see how this works. First, we’ll display a photo of the invitation. On extra small and small devices, it will occupy all the available space. So we’ll use the .col-12 class, which means the photo will span all the 12 columns available in the row. But for the medium and up devices, it will span only 5 columns.

First, please download the image I prepared for you and save it as  Last-Bash-in-Nash.png into your project folder. Or, use your own if you want. Inside the row, let’s add a div with this image: 

<div class="row">
     <div class="col-12 col-md-5">
       <img src="Last-Bash-in-Nash.png" alt="last bash in Nash bachelorette weekend invitation" class="img-fluid">
     </div>
 </div>

I used the class .col-12, then I added another class, .col-md-5, which will apply to medium devices and up only.

We’ll now add a second div inside this row, which will span all the 12 columns in extra small and small devices, and the rest of the 7 columns in all the other devices.  

<div class="col-12 col-md-7">
 </div>

The first thing we’ll do is add a title and the price for our invitation: 

<div class="col-12 col-md-7">
     <h1>Pink Guitar Last Bash in Nash Bachelorette Invitation</h1>
     <p>$3.90</p>
 </div>

Build A Basic Add to Cart Form

Next, we’ll build a basic Add to Cart form.  It’s an inline form, which has an input element for the customer to select the quantity and an “Add to cart” button. First, we’ll add a form element with a .row class after the price: 

<form class="row">
 </form>

Next, inside the form element, we’ll add the label for the input element. It spans only one column: 

<label for="quantity" class="form-label col-1">Qty:</label>

Now we’ll add a div with a .col-5 class. Inside this div will be the input with a number type: 

<div class="col-5">
     <input type="number" class="form-control" name="quantity" id="quantity"  
             value="10" title="Qty" min="10" inputmode="numeric">
 </div>

After this, we’ll add a div with a .col-6 class with the “Add to cart” button: 

<div class="col-6">
     <button type="submit" class="btn btn-dark">Add to cart</button>
 </div>

The .btn class, used together with button variants (like .btn-dark), is the basis for our custom styles.

This is the final code of our form:

<form class="row">
     <label for="quantity" class="form-label col-1">Qty:</label>
     <div class="col-5">
         <input type="number" class="form-control" name="quantity"
         id="quantity" value="10" title="Qty" min="10" inputmode="numeric">             
     </div>
     <div class="col-6">
         <button type="submit" class="btn btn-dark">Add to cart</button>
     </div>
 </form>

cONCLUSION

This first part of the tutorial introduced the fundamental concepts of Bootstrap, focusing on containers, breakpoints, and the grid system. We explored how containers provide structure and alignment to the content, and how breakpoints define responsive behavior at different screen sizes.

By implementing these concepts, we built a product page for a bachelorette party invitation. We utilized the grid system to create a responsive layout, ensuring optimal viewing on various devices. We also incorporated Bootstrap classes to style elements such as headers, images, forms, and buttons.

Throughout the tutorial, we emphasized the mobile-first approach of Bootstrap and highlighted the flexibility and scalability of the grid system. This foundation will serve as a solid starting point for future parts of the series, where we’ll dive deeper into other Bootstrap components and features.

Stay tuned for the next part of the tutorial, where we’ll explore additional Bootstrap elements and continue building our project.