Skip to main content
April 1, 2026Dan Rodney/13 min read

Bootstrap: Getting Started

Master Bootstrap's Grid System and Component Library

Bootstrap Tutorial Overview

v5.0.2
Bootstrap version used
12-col
column grid system
6
responsive breakpoints

Topics Covered in This Web Development Tutorial:

Master Bootstrap's Grid System (Containers, Rows, & Columns), Create Responsive Columns & Add Dynamic Content, Adjust Column Behavior Across Multiple Screen Sizes, Implement Bootstrap's Pre-Built Components & Professional Styling Framework

Exercise Preview

preview bootstrap get started

Exercise Overview

In this comprehensive exercise, you'll dive deep into Bootstrap—the industry-leading front-end component library that has revolutionized modern web development. Bootstrap dramatically accelerates development workflows while ensuring consistent, professional results across projects. Its two core pillars—a sophisticated flexbox-based grid system for creating responsive layouts and an extensive collection of pre-built components (including navigation bars, buttons, carousels, and modals)—form the foundation of countless professional websites. We'll be working with Bootstrap version 5.0.2, which represents the framework's most mature and stable iteration, offering improved performance and enhanced accessibility features that meet modern web standards.

Getting Started

Before we begin building with Bootstrap, let's ensure your development environment is properly configured with all necessary files and dependencies.

  1. Switch to the Desktop (don't be in your code editor).

  2. Navigate into Class Files > yourname-Flexbox Grid Class > Bootstrap Starter.

    • We've streamlined the Bootstrap setup process by downloading the complete framework from getbootstrap.com and optimizing it for this tutorial. The original download included comprehensive css and js folders with multiple file variations.

      For production efficiency, we've retained only the two essential files (one minified CSS file and one minified JavaScript file). The full Bootstrap distribution includes numerous auxiliary files—such as .map files for Sass development workflows—that aren't necessary for standard implementation. We've also removed the sourceMappingURL comment from the final line of both CSS and JS files, which can create confusion in browser DevTools when you're not utilizing Sass preprocessing.

    • Additionally, we've included a standard index.html starter file along with organized img and snippets folders to support your development process.

  3. For this exercise we'll be working exclusively within this Bootstrap Starter folder. Open the Bootstrap Starter folder in your code editor if it supports folder-based project management.
  4. In your code editor, open index.html.

  5. We need to establish the connection to Bootstrap's CSS framework, which provides access to the complete grid system and component library. Below the title tag, add the following link:

    <title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">

    NOTE: Strategic CSS loading order is crucial—Bootstrap's CSS loads before our custom styles, enabling us to override framework defaults when necessary. We're using the minified version for optimal performance and faster page loading. For projects requiring only Bootstrap's grid system (excluding components), consider linking to bootstrap-grid.min.css instead, as it offers a significantly smaller file size for grid-only implementations.

CSS Loading Order Matters

Bootstrap's CSS must be linked before your custom CSS to ensure you can override their styles as needed. The minified version is smaller and loads faster.

Bootstrap's Grid: Containers, Rows, & Columns

Now we'll explore Bootstrap's grid system using their carefully crafted CSS classes. This system forms the backbone of responsive web design and is thoroughly documented at getbootstrap.com/docs/5.0/layout/grid.

Bootstrap's grid architecture follows a strict hierarchical structure that mirrors flexbox principles: container > row > column. This nesting pattern ensures consistent behavior across all devices and screen sizes.

  1. Let's establish the foundation with a .container div. Inside the body tag, add a container (as shown below in bold):

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

  2. Add a row inside the container div:

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

  3. Add 2 col divs inside the row:

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

  4. To visualize our two-column layout in action, add the same placeholder image to both columns:

    <div class="container">
   <div class="row">
      <div class="col">
         <img src="img/large-low-lustre.jpg">
      </div>
      <div class="col">
         <img src="img/large-low-lustre.jpg">
      </div>
   </div>
</div>

  5. Save the file and preview the page in your browser.

    • You'll notice the images appear oversized because this is a high-resolution (HiDPI) image that hasn't been constrained to fit within its container. This is a common issue with modern high-resolution assets that we'll resolve immediately.
  6. Switch back to your code editor.
  7. Open main.css from the css folder (inside the Bootstrap Starter folder).

  8. At the top of the file, add this essential responsive image rule:

    img {
   max-width: 100%;
}

  9. Save the file and reload the page in your browser.

    • You should now see two perfectly proportioned images positioned side by side, each filling the complete width of their respective column (which are automatically sized equally).
    • Resize your browser window and observe how the images dynamically adjust to fill their columns as the layout responds to different viewport sizes.
    • The container uses fixed-width behavior, where the maximum width changes at specific breakpoints corresponding to different screen sizes. Bootstrap also offers fluid containers for full-width layouts, which we'll explore next.

    NOTE: Bootstrap provides an img-fluid class for responsive images, but applying this class individually to every image creates unnecessary markup complexity compared to implementing this single, comprehensive CSS rule.

  10. Switch back to index.html in your code editor and add -fluid to the container:

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

  11. Save the file and reload the page in your browser.

    • Resize the window to observe how the fluid container now spans 100% of the screen width. Note the subtle spacing on the left and right sides—this is intentional spacing created by Bootstrap's column gutter system, which we'll examine in detail during a future exercise on spacing and layout refinement.
  12. Switch back to your code editor.

  13. For this exercise, we'll revert to the standard container behavior. Remove -fluid as shown below:

    <body>
   <div class="container">

Bootstrap Grid Structure

1

Container

Wraps content and provides fixed-width or fluid responsive behavior

2

Row

Creates horizontal groups of columns using flexbox layout

3

Column

Content placement areas that automatically size or use 12-column grid

Container vs Container-Fluid

FeatureContainerContainer-Fluid
Width BehaviorFixed-width with breakpoints100% screen width
ResponsiveYes, with max-widthYes, always full width
Best ForMost layoutsFull-width designs
Recommended: Use standard container for most layouts unless you need full-width coverage

Adjusting Column Widths

Bootstrap's grid system leverages the power of CSS flexbox technology. Each row functions as a flex container, while each col acts as a flex item with flex-grow: 1; applied by default. This means columns automatically expand to fill available space equally, as we observed in our flexbox studies. However, Bootstrap also provides a precise 12-column grid system for granular layout control.

  1. Let's create an asymmetrical layout where the left column occupies 8 columns and the right column takes 4 columns (8+4=12). Add -8 to the col class for the first column:

    <div class="container">
   <div class="row">
      <div class="col-8">
         <img src="img/large-low-lustre.jpg">

  2. Save the file and reload the page in your browser.

    • Notice how the left column now dominates the layout with a significantly larger width than the right column. Bootstrap's intelligent grid system automatically calculates that 12 total columns minus the 8 we explicitly defined equals 4 remaining columns for the second column. The right column automatically becomes 4 columns wide without explicit declaration. However, if content doesn't fit naturally within this automatic allocation, flexbox wrapping could cause elements to move to the next line. In such cases, explicitly setting col-4 on the right column ensures proper alignment and prevents unwanted wrapping.

  3. Resize your browser window to observe how the layout maintains columns even on smaller screens. For better user experience, we want these images to stack vertically on mobile devices rather than remaining side-by-side.

    Bootstrap employs a mobile-first responsive design philosophy. To create stacked layouts on small screens while maintaining columns on larger displays, we specify the minimum screen size where columns should appear. The system then maintains columns at that breakpoint and all larger sizes. Here's Bootstrap's comprehensive breakpoint system:

    Code Size Breakpoint
    xs Extra Small Devices Smaller than 576 px
    sm Small Devices 576 px & Larger
    md Medium Devices 768 px & Larger
    lg Large Devices 992 px & Larger
    xl Extra Large Devices 1200 px & Larger
    xxl Extra Large Devices 1400 px & Larger

  4. Switch back to your code editor and add -md to the col class:

    <div class="container">
   <div class="row">
      <div class="col-md-8">
         <img src="img/large-low-lustre.jpg">

  5. Save the file and reload the page in your browser.

    • Resize the window from narrow to wide and observe the responsive behavior. When the viewport is less than 768px wide, the images stack vertically for optimal mobile viewing. At 768px or wider, the two-column layout appears, providing an excellent desktop experience.
    • Bootstrap's flexibility allows us to define different column proportions for various screen sizes, creating truly adaptive layouts. Let's implement this advanced technique.
  6. Switch back to your code editor.

  7. Let's create an even more dramatic layout for large displays while maintaining our current medium-screen behavior. Add a col-xl-10 class to make the left column 10 columns wide on extra-large screens:

    <div class="container">
   <div class="row">
      <div class="col-md-8 col-xl-10">
         <img src="img/large-low-lustre.jpg">

  8. Save the file and reload the page in your browser. Resize the window from small to large and notice the sophisticated responsive behavior:

    • When the viewport is less than 768px wide, images stack vertically for mobile optimization.
    • At 768px or wider (medium screens), columns appear as 8 and 4 columns wide respectively.
    • At 1200px or wider (extra-large screens), the layout shifts to 10 and 2 columns wide, creating a dramatic focal emphasis on the primary content.
  9. Switch back to your code editor.

  10. For optimal presentation with the content we'll be adding next, adjust the breakpoints to the following values:

    <div class="container">
   <div class="row">
      <div class="col-lg-8 col-xl-9">
         <img src="img/large-low-lustre.jpg">

Bootstrap Responsive Breakpoints

Extra Small (xs)
576
Small (sm)
576
Medium (md)
768
Large (lg)
992
Extra Large (xl)
1,200
XX Large (xxl)
1,400
Mobile-First Approach

Bootstrap uses mobile-first responsive design. Specify the smallest screen size that should have columns, and it will apply to that size and larger screens automatically.

Using the Bootstrap "Card" Component

Bootstrap's extensive component library includes sophisticated UI elements such as navigation bars, buttons, carousels, and modals, all documented comprehensively at getbootstrap.com/docs/5.0/components. For our right column, we'll replace the placeholder image with structured text content using Bootstrap's versatile card component, which provides a bordered container with professional styling for titles, content, and actions. In typical development workflows, you would copy sample code directly from Bootstrap's documentation and customize it for your specific needs. To ensure consistency regardless of any potential website updates, we've preserved the original sample code from Bootstrap's documentation in a local file.

  1. Open card.html from the snippets folder (inside the Bootstrap Starter folder).
  2. Select and copy all the code.
  3. Close the file.

  4. In the second column, replace the placeholder image with the card component code as shown below in bold:

    <div class="row">
   <div class="col-lg-8 col-xl-9">
      <img src="img/large-low-lustre.jpg">
   </div>
   <div class="col">
      <div class="card">
         <div class="card-header">
            Featured
         </div>
         <div class="card-body">

    Code Omitted To Save Space

    </div>
       </div>
   </div>
</div>

  5. Save the file and reload the page in your browser.

    The carefully crafted CSS classes throughout the sample code integrate seamlessly with Bootstrap's stylesheet to deliver professional styling—including subtle background colors, clean borders, and consistent spacing. Now let's customize this foundation with content appropriate for our specific page.

  6. Switch back to your code editor.

  7. For better semantic structure and SEO optimization, change the card-header div to an h2 element as shown below in bold:

    <div class="col">
   <div class="card">
      <h2 class="card-header">
         Featured
      </h2>
      <div class="card-body">

    NOTE: We'll be adding an h1 heading elsewhere in the layout later, so we're using an h2 here to maintain proper heading hierarchy for accessibility and SEO.

  8. Update the header text to reflect our page's purpose as shown below in bold:

    <h2 class="card-header">
   Just Announced
</h2>
  9. To streamline your development process, we've prepared the HTML markup for the main content section. Open table.html from the snippets folder (inside the Bootstrap Starter folder).
  10. Select and copy all the code.
  11. Close the file.

  12. You should be back in index.html. Replace the placeholder content inside card-body (remove the h5, p, and a elements) and paste in the new structured content as shown below:

    <div class="card">
   <h2 class="card-header">
      Just Announced
   </h2>
   <div class="card-body">
      <table class="table">

    Code Omitted To Save Space

    </table>
      Come see some amazing local bands!
   </div>
</div>
  13. In the content you just pasted, observe that we've already applied Bootstrap's table class to the table element. This class provides professional formatting including improved typography, consistent spacing, and subtle visual enhancements.

  14. Save the file and reload the page in your browser.

    • Our page now features contextually relevant content that demonstrates real-world application of Bootstrap components.
    • The clean horizontal lines separating table rows are automatically generated by Bootstrap's CSS framework.
    • The heading appears slightly oversized for our design, so let's refine it for better visual hierarchy.
  15. Switch back to your code editor.
  16. Open main.css from the css folder (inside the Bootstrap Starter folder).

  17. Below the img rule, add the following typography refinement:

    h2 {
   font-size: 1.7rem;
}

  18. Save the file and reload the page in your browser.

    • The refined heading size creates better visual balance within the card component.
    • Resize the window to observe how the card component responds fluidly—appearing below the photo on mobile screens and positioned in the right column on larger displays.

Bootstrap Component Benefits

Pre-built Styling

Cards provide instant professional appearance with borders, backgrounds, and spacing without custom CSS.

Consistent Design

Bootstrap components ensure visual consistency across your entire website or application.

Responsive Ready

Components automatically adapt to different screen sizes and work within the grid system.

Adding a Footer

Professional websites require comprehensive footer sections that provide essential information and navigation options. Let's implement a sophisticated footer using Bootstrap's flexible grid system.

  1. Switch back to index.html in your code editor.

  2. We'll create a second row specifically for footer content that will include copyright information and social media links. Bootstrap's row class can be applied to any HTML element, so we'll use the semantic footer tag for better document structure. Near the bottom of the page, below the existing row, add the following bold code:

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

      </footer>
   </div>
</body>

    NOTE: If you find it challenging to track which closing div tag corresponds to which element (row, col, etc.), consider installing the Visual Studio Code extension called HTML End Tag Labels. This useful tool adds helpful comments after each closing tag, clearly indicating what element is being closed.

  3. Add two balanced columns inside the footer for organized content presentation:

    <footer class="row">
   <div class="col"></div>
   <div class="col"></div>
</footer>

  4. Add essential business information and copyright details to the first column:

    <footer class="row">
   <div class="col">
      <p>
         The Jive Factory, 580 Lispenard<br>
         <small>All Rights Reserved</small>
      </p>
   </div>
   <div class="col"></div>
</footer>
  5. For the second column, we'll implement Bootstrap's list group component to create professional social media links. We've preserved Bootstrap's sample code from their official documentation in a local file for your convenience (in production workflows, you would typically source this directly from their website). In your code editor, open list-group.html from the snippets folder.
  6. Select and copy all the code.
  7. Close the file.

  8. You should be back in index.html. In the footer's second column, paste the list group code as shown below.

    <footer class="row">
   <div class="col">
      <p>
         The Jive Factory, 580 Lispenard<br>
         <small>All Rights Reserved</small>
      </p>
   </div>
   <div class="col">
      <div class="list-group">
         <a href="#" class="list-group-item-action active" aria-current="true">
            The current link item
         </a>

    Code Omitted To Save Space

    <a href="#" class="list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
      </div>
   </div>
</footer>

  9. We need to streamline the list-group content for our specific footer needs. Keep only the second list-group-item and delete the others. You should end up with the following clean structure:

    <div class="list-group">
   <a href="#" class="list-group-item-action">A second link item</a>
</div>

  10. Replace the placeholder text with current social media platform names, starting with X (formerly known as Twitter):

    <a href="#" class="list-group-item-action">X</a>

  11. Create additional social media links by duplicating this line. Copy and paste to create three total links:

    <a href="#" class="list-group-item-action">X</a>
<a href="#" class="list-group-item-action">X</a>
<a href="#" class="list-group-item-action">X</a>

  12. Update the content for each social platform as shown below in bold:

    <a href="#" class="list-group-item-action">X</a>
<a href="#" class="list-group-item-action">Facebook</a>
<a href="#" class="list-group-item-action">RSS</a>

  13. Save the file and reload the page in your browser. Notice the current layout characteristics:

    • The two footer columns are automatically balanced at equal widths (each occupying half the container width).
    • The social links display as a vertical list, but for modern footer design, horizontal alignment would be more appropriate and space-efficient.
  14. Switch back to your code editor.

  15. Transform the vertical list into a horizontal layout by adding list-group-horizontal to the existing list-group class as shown below in bold:

    <div class="list-group list-group-horizontal">

  16. Save the file and reload the page in your browser.

    • The social links would achieve better visual balance if they were right-aligned within the page layout rather than filling the entire width of their container column

Bootstrap List Groups

Pros
Easy to implement with pre-built classes
Supports both vertical and horizontal layouts
Includes hover and active states automatically
Flexible width control with Bootstrap utility classes
Cons
Limited customization without overriding CSS
May require additional spacing adjustments
Can look generic without custom styling
Flexbox Control

Use flex-grow-0 class to prevent columns from expanding and maintain natural content width, especially useful for navigation and social media links.

Key Takeaways

1Bootstrap requires a specific nested structure: container > row > column for the grid system to work properly
2Link Bootstrap CSS before your custom CSS to ensure you can override default styles when needed
3Bootstrap uses a mobile-first approach where you specify the smallest screen size for columns
4The 12-column grid system allows flexible layouts with automatic or specified column widths
5Container provides fixed-width responsive behavior while container-fluid spans full screen width
6Bootstrap components like cards and list groups provide pre-styled elements with consistent design
7Responsive breakpoints (xs, sm, md, lg, xl, xxl) control how layouts adapt across different screen sizes
8Utility classes like flex-grow-0 and img-fluid provide quick styling solutions without custom CSS

RELATED ARTICLES