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

Bootstrap: Creating a Photo Grid

Master Bootstrap Grid Layout for Responsive Photo Galleries

Prerequisites

This tutorial assumes basic knowledge of HTML and CSS. You'll need a code editor and the provided Lively and Fresh project folder to follow along.

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Bootstrap's Fluid Container System, Advanced Image Grid Techniques, and Professional Nested Section Layouts

Bootstrap Grid Concepts You'll Master

Fluid Container

Learn how container-fluid creates full-width layouts that span the entire screen width instead of responsive fixed widths.

Nesting Grids

Master the technique of creating nested 12-column grids within existing columns for complex layout structures.

Responsive Breakpoints

Control when columns appear or stack using Bootstrap's breakpoint classes like col-xs, col-sm, and col-md.

Exercise Preview

preview livelyandfresh

Exercise Overview

In this comprehensive exercise, you'll master Bootstrap's fluid-width grid system—a powerful layout approach that leverages the full screen width instead of fixed containers. This technique is essential for modern responsive designs that need to adapt seamlessly across devices, from ultra-wide monitors to mobile screens. You'll build a sophisticated photo gallery that demonstrates advanced grid nesting and responsive breakpoint management.

Project Development Workflow

1

Set Up Structure

Create fluid container with basic row structure and add temporary styling for visualization

2

Build Grid Layout

Implement two-column layout with nested grids for photo arrangements

3

Add Images

Insert responsive images and adjust padding for seamless grid appearance

4

Optimize Breakpoints

Fine-tune responsive behavior for different screen sizes

Getting Started

  1. We'll be working with the Lively and Fresh folder. Open that folder in your code editor if it allows you to (like VS Code, Sublime Text, or similar modern editors).

  2. In your code editor, open index.html. This is a well-structured HTML5 document that includes the essential viewport meta tag for mobile optimization, a Google web font for typography, Bootstrap's CSS framework, and a main.css file (currently empty and ready for your custom styles).

  3. Let's establish our foundation by adding a fluid-width container and a row. In the body, add the following code:

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

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

    NOTE: Bootstrap's container-fluid class creates a container that spans the full viewport width, eliminating the responsive fixed-width constraints used in traditional Bootstrap layouts. This approach is particularly effective for galleries, hero sections, and full-width content designs that need maximum visual impact.

Container-Fluid vs Container

Bootstrap's container-fluid class gives us a container that's the full width of the screen, instead of responsive fixed width used in previous projects.

Laying Out a Photo Grid

Now we'll create the foundational structure for our asymmetrical photo gallery—a design pattern commonly used in portfolio sites and content-rich applications.

  1. Inside the row, add two columns with intentionally unequal widths:

    <div class="row">
   <div class="col-md-5">
      image
   </div>
   <div class="col-md-7">
      grid
   </div>
</div>

  2. Save the file.

    Bootstrap's 12-column grid system allows for flexible proportions—our 5/7 split creates visual interest while maintaining balance. The left column will showcase a hero image, while the right column will contain our nested photo grid.

  3. Open main.css in the css folder. This empty stylesheet is where we'll add our custom styling to enhance Bootstrap's foundation.

  4. Let's create temporary visual guides to help us understand the grid structure during development:

    div[class^="col"] {
   border: 1px solid #333;
   background: #fd9;
   line-height: 18;
}

    This CSS uses an attribute selector to target any class beginning with col, accommodating Bootstrap's various column classes across different screen sizes—a more maintainable approach than targeting each class individually.

  5. Save the file.

  6. Preview index.html in a browser and resize the window to the medium breakpoint (992px) or wider.

    You should now see the layout's two-column structure clearly defined. The left column will house a single statement image, while the right column will contain our multi-image grid that balances with the left column's height.

Bootstrap 12-Column Grid Distribution

Left Column (col-md-5)
5
Right Column (col-md-7)
7
CSS Attribute Selector Technique

Use div[class^="col"] to target any Bootstrap column class that starts with 'col' - a powerful way to style all columns regardless of screen size.

Nesting Columns

One of Bootstrap's most powerful features is its ability to nest grids within grids. This technique allows for sophisticated layouts that would be complex to achieve with traditional CSS approaches.

Inside the right column, we'll create a nested 12-column grid to accommodate five photos arranged strategically: two images in the top row and three in the bottom row. This asymmetrical arrangement creates visual dynamism while maintaining structural integrity.

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

  2. In the col-md-7 div, replace the placeholder text with two nested rows:

    <div class="col-md-7">
   <div class="row">
      grid
   </div>
   <div class="row">
      grid
   </div>
</div>
  3. Save the file and preview in a browser.
  4. Ensure the window is wide enough to see image on the left and the two rows of grid placeholders on the right.
  5. Switch back to index.html in your code editor.

  6. Add two columns inside the first nested row:

    <div class="col-md-7">
   <div class="row">
      <div class="col-md-6">grid</div>
      <div class="col-md-6">grid</div>
   </div>
   <div class="row">
      grid
   </div>
</div>

  7. In the second nested row, add three equal columns. Note the col-md-4 class—since 12 divided by 3 equals 4:

    <div class="row">
   <div class="col-md-6">grid</div>
   <div class="col-md-6">grid</div>
</div>
<div class="row">
   <div class="col-md-4">grid</div>
   <div class="col-md-4">grid</div>
   <div class="col-md-4">grid</div>
</div>
  8. Save the file.

  9. Preview in your browser to see the complete grid structure. Resize the browser window to observe how the layout gracefully collapses to a single column at smaller viewport widths—this is Bootstrap's mobile-first responsive design in action.

Nested Grid Structure

FeatureTop RowBottom Row
Number of Images2 images3 images
Column Classescol-md-6col-md-4
Total Columns Used6 + 6 = 124 + 4 + 4 = 12
Recommended: Both rows perfectly utilize the 12-column grid system for balanced layout

Adding Images to the Photo Grid

With our grid structure solid, we'll now populate it with images and implement responsive image techniques that ensure optimal display across all devices.

  1. Let's start with the hero image in the col-md-5 column around line 15:

    <div class="row">
   <div class="col-md-5">
      <img src="img/stand@2x.jpg">
   </div>
  2. Save the file.
  3. Reload your browser. The image will likely overflow its container—this is expected behavior before we apply responsive styling.

  4. Return to main.css and add this essential responsive image rule at the top:

    img {
   max-width: 100%;
}

    This CSS rule is fundamental to modern responsive design, ensuring images never exceed their container width while maintaining their aspect ratio.

  5. Save the file.
  6. Reload your browser. The image should now fit properly within its column, though we still need to address spacing issues.
  7. Return to index.html in your code editor.

  8. Now populate the grid columns with the remaining images around line 17:

    <div class="row">
   <div class="col-md-6"><img src="img/raspberries@2x.jpg"></div>
   <div class="col-md-6"><img src="img/apples@2x.jpg"></div>
</div>
<div class="row">
   <div class="col-md-4"><img src="img/lemons@2x.jpg"></div>
   <div class="col-md-4"><img src="img/customer@2x.jpg"></div>
   <div class="col-md-4"><img src="img/cherries@2x.jpg"></div>
</div>

  9. Save the file.

  10. Reload your browser. All images should be visible, but Bootstrap's default 15px column padding creates unwanted gaps that interrupt the gallery's visual flow.
  11. Return to main.css in your code editor.

  12. Replace the temporary styling in the div[class^="col"] rule with padding removal:

    div[class^="col"] {
   padding: 0;
}

  13. Save the file and reload the browser.

    You'll notice the right column's height doesn't align with the left column. This occurs because Bootstrap rows use -15px margins to offset column padding—when we removed the padding, we created a margin imbalance. For a comprehensive understanding of Bootstrap's grid mechanics, reference the official documentation at getbootstrap.com/docs/5.3/layout/grid/.

  14. Return to main.css in your code editor.

  15. Add this rule to correct the nested row margins:

    .row {
   margin: 0;
}

  16. Save the file and reload the browser. The grid should now display with perfect alignment and seamless image transitions.

    Test the responsive behavior by resizing your browser window. Notice how the grid currently collapses to single-column layout at relatively wide viewport widths—we'll refine this behavior using Bootstrap's breakpoint system.

Image Responsiveness Required

Always add max-width: 100% to images to make them responsive. Without this CSS rule, images will display at their full size and break the layout.

Bootstrap Column Padding Considerations

Pros
Default 15px padding creates visual separation between content
Maintains consistent spacing across grid layouts
Works well for text-based content
Cons
Creates unwanted gaps around images in photo grids
Prevents flush alignment of visual elements
Requires manual override for seamless image layouts

Changing Breakpoints in Bootstrap

Bootstrap's breakpoint system gives you precise control over when layout changes occur. Understanding these breakpoints is crucial for creating truly responsive designs that work across the full spectrum of devices in 2026's diverse device landscape.

  1. Return to your code editor.

  2. In index.html, change the nested photo grid columns from md (medium, 768px+) to sm (small, 576px+) to maintain the grid layout at smaller viewports:

    <div class="row">
   <div class="col-sm-6"><img src="img/raspberries@2x.jpg"></div>
   <div class="col-sm-6"><img src="img/apples@2x.jpg"></div>
</div>
<div class="row">
   <div class="col-sm-4"><img src="img/lemons@2x.jpg"></div>
   <div class="col-sm-4"><img src="img/customer@2x.jpg"></div>
   <div class="col-sm-4"><img src="img/cherries@2x.jpg"></div>
</div>
  3. Save the file.
  4. Reload your browser.

  5. Resize the window from desktop to mobile, observing these responsive behaviors:

    • At tablet sizes, the photo grid moves below the hero image while maintaining its grid structure
    • As the viewport narrows further, all images eventually stack vertically
    • The fully stacked mobile layout, while functional, could benefit from strategic side-by-side pairings for better visual interest
  6. Return to index.html in your code editor.

  7. For the raspberries and apples row, change the breakpoint to xs so these images remain side-by-side even on mobile devices:

    <div class="row">
   <div class="col-xs-6"><img src="img/raspberries@2x.jpg"></div>
   <div class="col-xs-6"><img src="img/apples@2x.jpg"></div>
</div>

  8. Save the file and test across all viewport sizes. The raspberry and apple images should maintain their side-by-side arrangement even on the smallest screens, creating a more engaging mobile experience.

Responsive Behavior Changes

992px and above

Desktop View

Two-column layout with nested photo grid

768px - 991px

Tablet View

Photo grid drops below main image, maintains grid structure

Below 768px

Mobile View

All images stack vertically except raspberries and apples

Bootstrap Breakpoint System

xs (Extra Small)
480
sm (Small)
768
md (Medium)
992
lg (Large)
1,200

Optional Bonus: Adding a Full Screen Hero Image

To complete our professional gallery design, we'll add a full-screen hero section—a design pattern that's become essential for modern websites seeking maximum visual impact.

  1. Let's create a dramatic hero section at the top of the page. In index.html, add this code directly below the opening container-fluid div:

  2. Add the hero structure:

    <div class="container-fluid">
   <div class="row">
      <div class="col-xs-12">
          <h1>Lively + Fresh</h1>
      </div>
   </div>
   <div class="row">

    NOTE: Using col-xs-12 ensures the hero spans the full width across all device sizes, creating consistent impact from desktop to mobile.

  3. Add a custom class for styling targeting:

    <div class="container-fluid">
   <div class="row">
      <div class="col-xs-12 hero">
         <h1>Lively + Fresh</h1>
      </div>
   </div>
  4. Save the file.
  5. Switch to main.css.

  6. Add these sophisticated hero styles that leverage modern CSS features:

    .hero {
   background: url(../img/hero@2x.jpg) center; 
   background-size: cover;
   padding: 10%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero h1 {
   font-family: 'Permanent Marker', sans-serif;
   font-size: 10vw;
   color: #fff;
   text-align: center;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
   margin: 0;
}

    PRO TIP: Using 100vh (viewport height) creates true full-screen impact, while vw (viewport width) units ensure the typography scales perfectly across devices. For content-heavy designs, consider using min-height: 100vh to prevent content from being cut off on smaller screens.

  7. Save the file.

  8. Reload your browser to reveal your professional-grade hero section. The combination of full-screen imagery, responsive typography, and careful alignment creates immediate visual impact that rivals contemporary design standards.

    Don't forget to scroll down to see how the hero seamlessly transitions to your photo grid below.

Hero Section Implementation

Full Screen Coverage

Using height: 100vh ensures the hero section fills the entire viewport height regardless of screen size.

Responsive Typography

Font-size: 10vw creates text that scales proportionally with viewport width for optimal readability.

Background Optimization

Background-size: cover ensures the hero image fills the container while maintaining aspect ratio.

Content Overflow Prevention

For content that may not fit on smaller screens, use min-height: 100vh instead of height: 100vh to prevent content from being cut off.

Key Takeaways

1Bootstrap's container-fluid class creates full-width layouts that span the entire screen width, unlike the responsive fixed-width container class
2The 12-column grid system allows flexible layouts by distributing columns with classes like col-md-5 and col-md-7 for unequal column widths
3Nested grids require only adding new row divs within existing columns, automatically creating another 12-column grid system for complex layouts
4CSS attribute selectors like div[class^='col'] efficiently target all Bootstrap column classes regardless of screen size specifications
5Responsive images require max-width: 100% to prevent layout breaking, and Bootstrap's default 15px column padding often needs removal for seamless photo grids
6Different breakpoint classes (xs, sm, md, lg) control when columns stack or remain side-by-side, enabling fine-tuned responsive behavior
7Viewport units like 100vh for height and 10vw for font-size create truly responsive hero sections that adapt to any screen size
8Bootstrap's negative row margins must be zeroed out (margin: 0) in nested layouts to ensure proper alignment and prevent layout overflow issues

RELATED ARTICLES