DEV Community

Cover image for I Recreated Pinterest UI with Bootstrap.
Shreelaxmi Hegde
Shreelaxmi Hegde

Posted on

I Recreated Pinterest UI with Bootstrap.

#webdev #bootstrap #beginners #clone

As soon as I learned Bootstrap, I was drawn to its built-in classes for responsiveness, grid layout, flex utilities, cards, and navbar components. And these all features mapped naturally to the Pinterest dashboard. I chose Pinterest as my target to deepen my understanding of CSS, responsiveness, and layout designs.

Project overview
Stack:

  • HTML
  • CSS
  • Bootstrap 5

I built a responsive Pinterest-like UI with a grid of images, cards, hover effects, sidebar and a simple search bar.

Screenshot preview:
dashboard screenshot

explore page screenshot

Planning the layout:
I started by sketching the main sections:

  • Sidebar + Search bar
  • A fixed Sidebar
  • Main image grid with card components

My plan was to use Bootstrap for the overall structure (grid and breakpoints) and custom CSS for fine details (hover effects, spacing, overflow, etc).

1. Sidebar & Search bar
First I started with the smaller section, the Sidebar.
Used navigation icons and aligned them with built in classes.
Used list-unstyled class for to remove text decorations etc.

<div class="nav-items m-3 p-3">
      <ul class="list-unstyled">
           <li class="nav-item p-2">
               <a href="#"><i class=""></i></a>
            </li>
            <!-- list of navigation tabs-->
       </ul> 
</div>
Enter fullscreen mode Exit fullscreen mode

In the same way I built the horizontal Search bar with user profile which occupies whole width except the vertical Sidebar.

2. Scrolling & overflow issues:
Even though I gave sticky-top property to the Search bar, the page was stretching when scrolled. To fix this annoying issue I used overflow: hidden style to the body tag and applied overflow: auto only for the image container section.

body { 
  overflow-x: hidden; /* prevent horizontal stretch */
}     

.image-grid-container { 
  overflow: auto;    /* scroll only the grid */
}
Enter fullscreen mode Exit fullscreen mode

3. Grid & image layout

Pinterest uses a masonry layout which arranges different sized images and uses Javascript for accurate calculation.
I experimented building it with CSS grid for more simpler arrangement and chose same-sized image cards to keep layout simple and responsive. The consistent column wise image alignment made the page look more friendly.

Example Bootstrap column pattern:

<div class="row g-3">
  <div class="col-6 col-sm-4 col-md-3">
    <!-- card with image -->
  </div>
  <!-- repeat -->
</div>
Enter fullscreen mode Exit fullscreen mode

To make the Image layout responsive across all screen sizes, I used the breakpoints defined in bootstrap and adjusted columns accordingly.

Example:
row-cols-xl-5 5 image columns for extra large screens
row-cols-lg-4 4 image columns for large screens
row-cols-sm-2 2 image columns for small screens
etc.

4. Cards & hover effects

I used Bootstrap cards for structure and then added CSS for hover effect:

.card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
Enter fullscreen mode Exit fullscreen mode

This makes images look like they’re popping out of the page.

Key Learnings

  • Practical ways to combine Bootstrap utilities and custom CSS.
  • How to deal with responsive breakpoints with Bootstrap.
  • Debugging real UI issues (overflow, alignment, spacing) is invaluable.

  • Don’t memorize classes instead understand layout logic.

  • Bootstrap vs. custom CSS styling:
    Before starting the project I thought

If Bootstrap have ready-made classes and utilities along with responsiveness, then why do we need raw CSS? Things made easier and faster.

But after the project realized the importance of vanilla CSS. Why we still need it.

I learned how to blend Bootstrap with CSS.
While using these classes no surprise we feel lost.

How much to use Bootstrap?
When to use CSS?

After going through this project I can suggest,
apply only necessary Bootstrap classes first, then add custom CSS for unhandled cases. Doing the reverse will lead to conflicts.

  • Documentation reading Learning to find the right utility classes quickly was a challenging part. As Bootstrap comes with a ton of built in classes, sometimes it feels overwhelming and time consuming. Deciding what fits the best for our layout is challenging. I read examples and inspect Bootstrap source components. And tried to match the best one.

Links
Code: GitHub repo

Thanks for reading.
If you enjoyed this, feel free to reach out and give valuable feedback.
Happy to connect with fellow devs.

Top comments (0)