April 1, 2026Dan Rodney/10 min read

Bootstrap: Getting Started

Build responsive websites with Bootstrap framework fundamentals

Bootstrap Framework Overview

12-col

Column Grid System

4 sizes

Device Breakpoints

992px

Medium Device Width

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Master the fundamentals of Bootstrap by adding content and laying out pages, implementing Bootstrap's powerful grid system, creating and fine-tuning responsive columns, and integrating navigation bars with essential UI components.

Exercise Preview

Exercise Overview

Bootstrap remains one of the most influential front-end frameworks in web development, powering millions of websites with its robust grid system and component library. While newer versions exist, Bootstrap 3's core principles—responsive design, mobile-first approach, and component-based architecture—established patterns still widely used across the industry today. Its signature 12-column grid system revolutionized how developers approach web development, making responsive layouts accessible to developers of all skill levels. In this comprehensive exercise, you'll build a complete webpage from the ground up, learning Bootstrap's fundamental concepts through hands-on practice. This foundation will serve you well whether you're working with legacy Bootstrap projects or modern frameworks that adopted its design patterns.

Bootstrap 3 Core Features

Bootstrap's core feature is a grid system for creating columns and rows. Grids help keep a design consistent and make it easier to be responsive across different device sizes.

Hello Bootstrap!

While Bootstrap has evolved significantly since version 3, understanding its foundational approach provides invaluable insight into modern responsive design principles. Let's begin by exploring the framework's structure and core files.

First, let's examine what's included in a typical Bootstrap setup. Navigate to your Desktop, then open Class Files > yourname-Mobile and Responsive Class > Bootstrap.

NOTE: We've prepared a complete development environment including Bootstrap's core files, a starter index.html file, sample images, jQuery library (located in the js folder), and helpful snippets you'll use throughout this exercise series. This mirrors how you'd typically organize a real-world project.
Open the entire Bootstrap folder in your preferred code editor. Most modern editors like VS Code, Sublime Text, or Atom allow you to work with complete project folders, giving you easy access to all files.
Open index.html in your code editor to begin building our responsive webpage.
Let's start with proper document structure. On line 6, add a descriptive title that reflects our project:
```
<title>Jive Factory</title>
```
Next, we'll link to Bootstrap's CSS framework, which contains all the pre-built styles and responsive utilities we'll use. Add this link below the title:
```
<link rel="stylesheet" href="css/bootstrap.min.css">
```
This single CSS file contains Bootstrap's entire component library, grid system, and responsive utilities—thousands of lines of carefully crafted CSS that would take months to write from scratch.
Notice the jQuery script link at the bottom of the file. jQuery powers many of Bootstrap's interactive components like dropdowns, modals, and collapsible navigation. We'll utilize this JavaScript functionality as we build more complex interactions.

Initial Bootstrap Setup Process

Download Files

Get Bootstrap files from getbootstrap.com with CSS, JS, and documentation

Add Title Tag

Include page title in HTML head section for proper document structure

Link CSS

Connect Bootstrap CSS file to enable pre-built component styling

Adding Real Content & Laying Out the Page

Now we'll implement Bootstrap's fundamental layout structure. Understanding this hierarchical approach is crucial for creating professional, responsive designs.

Bootstrap requires a specific nested structure to function properly: container > row > column. This hierarchy ensures consistent spacing, proper alignment, and responsive behavior across all devices. Let's start by adding a .container div to wrap all our content.
Inside the body tag, add the container structure as shown below:
```
<body>
   <div class="container">

   </div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
```
The container class centers your content and provides responsive padding that adapts to different screen sizes.
Next, we'll add a row—Bootstrap's wrapper for columns that ensures proper alignment and spacing. Add this .row div inside the .container:
```
<body>
   <div class="container">
      <div class="row">

      </div>
   </div>
```
Rows use negative margins to counteract the container's padding, creating perfect edge-to-edge alignment for your columns.
Now we'll add our main content—a slideshow placeholder image that will serve as our hero section. Add this code inside the row:
```
<body>
   <div class="container">
      <div class="row">
         <div>
            <img src="img/slideshow-low-lustre.jpg">
         </div>
      </div>
   </div>
```
NOTE: We're intentionally omitting width and height attributes to allow the image to be flexible and responsive. In production websites, you'd include proper alt attributes for accessibility, but we're focusing on layout fundamentals here.
To streamline the tutorial, we've pre-written the sidebar HTML. Open sidebar.html from the Bootstrap > snippets folder to see this code.
Select all the sidebar code and copy it.
Close the sidebar.html file.
Return to index.html and paste the sidebar code after the slideshow div (around line 15), ensuring it stays within the .row container.

Your structure should now look like this:

<body>
   <div class="container">
      <div class="row">
         <div>
            <img src="img/slideshow-low-lustre.jpg">
         </div>
         <div>
            <div>
               <h4>Just Announced</h4>

Code Omitted To Save Space

<p>Happy Hour Drink Specials 5–8 pm</p>
            </div>
         </div>
      </div>
   </div>

Notice that we've already applied Bootstrap's table class to the table element in the sidebar content. This class provides clean, professional styling with proper spacing and typography.
Save your file and preview index.html in a browser. You'll immediately notice the slideshow image dominates the page—this is because it's a high-resolution image that hasn't been constrained to fit the layout.
Return to your code editor and add Bootstrap's responsive image class:
```
<img class="img-responsive" src="img/slideshow-low-lustre.jpg">
```
The img-responsive class applies max-width: 100% and height: auto, ensuring images scale gracefully with their container.
Save and preview again. Resize your browser window and watch how the image now adapts fluidly to different screen sizes. The content flows nicely on mobile devices but appears stretched and unbalanced on larger screens—this is exactly what we'll fix with Bootstrap's grid system.

Bootstrap Structure Requirement

Bootstrap requires a specific nested structure: container > row > column. This hierarchy is essential for proper grid functionality and responsive behavior.

Essential Bootstrap Classes

Container

Wraps all page content and provides proper width constraints. Foundation of Bootstrap layout system.

Row

Groups columns together and ensures proper alignment. Required parent element for column structure.

img-responsive

Makes images scale automatically with browser window size. Critical for mobile-friendly designs.

Creating & Adjusting Columns

Bootstrap's 12-column grid system is the foundation of modern responsive design. Let's implement it to create a professional two-column layout.

To transform our single-column layout into a responsive two-column design, we'll add Bootstrap's column classes. The framework uses a 12-column grid, so we'll allocate 8 columns to the slideshow and 4 to the sidebar (8+4=12). Add these classes:
```
<div class="row">
   <div class="col-md-8">
      <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
   </div>
   <div class="col-md-4">
      <div>
         <h4>Just Announced</h4>
```
Save and preview the page. Notice how Bootstrap's responsive behavior creates different layouts for different screen sizes:
- On mobile devices, the layout remains single-column with appropriate margins for readability.
- On larger screens, the content automatically arranges into two columns with the sidebar positioned alongside the main image.
- The proportions work well, but we can fine-tune them for better visual balance. Let's adjust to a 9-3 split (9+3=12) to give the image more prominence.

Update the column widths for better proportional balance:

<div class="col-md-9">
   <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
</div>
<div class="col-md-3">

Save and preview again. The improved proportions create a more visually appealing layout that follows design best practices.

Understanding Bootstrap's breakpoint system is crucial for responsive design. The framework categorizes devices into specific ranges, allowing precise control over when layouts change:

Code	Device Category	Breakpoint
xs	Extra Small Devices: Phones	Smaller than 768 px
sm	Small Devices: Tablets	768 px & Larger
md	Medium Devices: Desktops	992 px & Larger
lg	Large Devices: Large Desktops	1200 px & Larger

Currently, our columns only appear when the window reaches 992px wide. For better tablet experience, let's make the columns appear earlier.

Change the breakpoint from md to sm to accommodate tablet users:

<div class="col-sm-9">
   <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
</div>
<div class="col-sm-9">

Save and preview at different screen sizes. The sidebar now appears starting at 768px, providing a better tablet experience.
At this smaller breakpoint, the sidebar content feels cramped. Let's adjust back to an 8-4 split while keeping the earlier breakpoint:
```
<div class="col-sm-8">
   <img class="img-responsive" src="img/slideshow-low-lustre.jpg">
</div>
<div class="col-sm-4">
```
Save and preview once more. This combination provides optimal readability across all device sizes, demonstrating how small adjustments can significantly improve user experience.

Bootstrap Grid Layout Distribution

Slideshow Area

Sidebar Content

Device Breakpoint Comparison

Feature	Device Size	Breakpoint
Extra Small (Phones)	< 768px	xs
Small (Tablets)	768px+	sm
Medium (Desktops)	992px+	md
Large (Desktops)	1200px+	lg

Recommended: Use sm breakpoint for tablet-sized devices and larger to ensure proper column layout

Using More Components

Bootstrap's component library extends far beyond the grid system, offering pre-styled UI elements that ensure consistency and professional appearance. Let's enhance our sidebar with some of these components.

Return to your code editor. Our sidebar contains two distinct content sections that need visual separation.
We'll use Bootstrap's well component, which creates a subtle inset effect perfect for highlighting content areas. Add the well class to the Just Announced section:
```
<div class="col-sm-4">
   <div class="well">
      <h4>Just Announced</h4>
      <table class="table">
```

Apply the same treatment to the Jive at Five section (around line 39):

<div class="well">
      <h4>Jive at Five</h4>
      <p>Happy Hour Drink Specials 5–8 pm</p>

Save and preview your changes. The well component adds subtle visual hierarchy through light gray backgrounds and gentle borders, creating clear content separation without overwhelming the design.

Bootstrap Component Benefits

The well component provides a simple inset effect with light gray background and subtle border to visually separate content sections without custom CSS.

Adding a Footer

A well-structured footer provides essential site information and navigation options. Let's create a professional footer using Bootstrap's grid system.

Switch back to your code editor to add footer content below our main content area.
Add a new row dedicated to footer content. Insert this code after the first row closes (around line 45):
```
</div>
   <hr>
   <footer class="row">

   </footer> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
```
The horizontal rule provides visual separation between main content and footer information.
Add copyright information inside the footer row:
```
<hr>
<footer class="row">
   <div>
      <h4>The Jive Factory <small>All rights reserved.</small></h4>
   </div>
</footer>
```
Bootstrap's small tag provides semantic meaning and appropriate styling for secondary information.

Add social media navigation links after the copyright section:

<footer class="row">
   <div>
      <h4>The Jive Factory <small>All rights reserved.</small></h4>
   </div>
   <div>
      <ul>
         <li><a href="#">X (formerly known as Twitter)</a></li>
         <li><a href="#">Facebook</a></li>
         <li><a href="#">RSS</a></li>
      </ul>
   </div>
</footer>

Apply Bootstrap's grid system to create equal-width footer columns. Add column classes to both divs:

<footer class="row">
   <div class="col-sm-6">
      <h4>The Jive Factory <small>All rights reserved.</small></h4>
   </div> 
   <div class="col-sm-6">
      <ul>

Save and preview your progress. The social links currently display as a standard bulleted list, but Bootstrap offers navigation components that will improve their appearance and usability.
Return to your code editor to transform the social links into professional navigation.
Apply Bootstrap's navigation classes to create styled, interactive social links:
```
<div class="col-sm-6">
   <ul class="nav nav-pills pull-right">
      <li><a href="#">X</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">RSS</a></li>
   </ul>
</div>
```
NOTE: The nav class removes list bullets, nav-pills adds button-like styling with hover effects, and pull-right aligns the navigation to the right side of its container.
Save and preview the completed footer. Notice how Bootstrap automatically provides interactive hover states and professional styling—features that would require significant custom CSS to implement from scratch.

Footer Implementation Steps

Create Footer Row

Add new row container below main content with proper footer semantic tag

Add Copyright Section

Include business name and rights statement using Bootstrap's small text styling

Configure Social Links

Transform list into navigation using nav-pills class with right alignment

Adding a Navbar

Navigation bars are critical for user experience, and Bootstrap's navbar component provides responsive, accessible navigation that works seamlessly across all devices. Let's implement a professional navigation system.

Open navbar-simplified.html from the snippets folder to access the pre-configured navigation code.

NOTE: This code is adapted from Bootstrap's official documentation, streamlined to focus on essential navigation features. In real projects, you'd customize this further based on your specific navigation requirements.
Select and copy all the navbar code.
Close the snippet file and return to index.html.
Position the navbar at the top of your page content by pasting it inside the container div, before the first row:

Your structure should look like this:

<div class="container">
   <nav class="navbar navbar-default">

Code Omitted To Save Space

</nav>
   <div class="row">
      <div class="col-sm-8">

Replace the placeholder navigation content with relevant menu items for the Jive Factory website (around line 20):

<a class="navbar-brand" href="#">Jive Factory</a>
</div>

<!—Collect the nav links and other content for toggling—>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
      <li class="active"><a href="#">Shows</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Directions</a></li>
   </ul>

   <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Contact</a></li>
   </ul>

Bootstrap's navbar includes sophisticated responsive behavior that requires JavaScript. Add the Bootstrap JavaScript library at the bottom of your page, below the existing jQuery link:
```
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
```
Save and preview your completed responsive website. Test the navigation behavior across different screen sizes:
- On desktop screens, the navbar displays as a full horizontal menu with your brand name and navigation links clearly visible.
- On mobile devices, the navbar automatically collapses into a space-saving "hamburger" menu (the three-line button). Tapping this button reveals the full navigation menu—a pattern that has become standard across the web.
This level of responsive functionality, complete with smooth animations and accessibility features, demonstrates Bootstrap's power. You've created a professional, mobile-optimized website using only HTML markup and Bootstrap's pre-built CSS and JavaScript components—no custom CSS or JavaScript required. This approach allows developers to focus on content and user experience rather than wrestling with cross-browser compatibility and responsive design challenges.

Mobile-First Navigation

The navbar automatically collapses on smaller screens, creating a hamburger menu icon that expands when clicked. This responsive behavior requires both Bootstrap CSS and JavaScript.

Navbar Setup Requirements

0/3

Copy navbar code from Bootstrap documentation

Use simplified version to avoid unnecessary complexity

Replace placeholder content with real navigation items

Include brand name and relevant site sections

Add Bootstrap JavaScript file

Required for mobile menu toggle functionality

Key Takeaways

1Bootstrap requires a specific nested structure of container > row > column for proper grid functionality

2The 12-column grid system allows flexible layout combinations like 8+4 or 9+3 columns

3Device breakpoints (xs, sm, md, lg) control when columns appear based on screen width

4The img-responsive class makes images automatically scale with browser window size

5Bootstrap components like wells and nav-pills provide styling without custom CSS

6Mobile-first approach means smaller breakpoints inherit styles from larger ones

7Responsive navigation with hamburger menu requires both Bootstrap CSS and JavaScript

8Bootstrap's pre-built classes eliminate the need to write custom CSS for basic layouts

April 2, 2026