Ask Daniel's CODEX

Bootstrap Grid: Image and Text Layout

[1] DANIEL:

Please convert this html into a bootstrap grid so the image is 1/4 the container and it will all work in responsive. Only write the snippet, no styles.

<h3>Guidance Through the Rough Waters of Business</h3> <p><img alt="" src="/portals/0/Images/Andrew-Bielat-400x.jpg" style="float:left; margin:15px; width:25%" title=""></p> <p class="lead">As the premier source for Fractional-Leadership and Executive Coaching, Pilot Advisors provides strong leaders like you the resources to close the gap to your Best Possible - delivering objective analysis, proven solutions, calm execution, measurable gains, and self-sustaining teams without ego or overhead.</p> <p class="lead">Together, we chart a course towards success, leveraging our expertise and experience to ensure your company reaches its full potential.</p>

[2] GROK:

```html <h3>Guidance Through the Rough Waters of Business</h3>

<div class="row align-items-start"> <div class="col-md-3 mb-4 mb-md-0 pe-md-4"> <img src="/portals/0/Images/Andrew-Bielat-400x.jpg" class="img-fluid" alt="Andrew Bielat"> </div> <div class="col-md-9"> <p class="lead">As the premier source for Fractional-Leadership and Executive Coaching, Pilot Advisors provides strong leaders like you the resources to close the gap to your Best Possible - delivering objective analysis, proven solutions, calm execution, measurable gains, and self-sustaining teams without ego or overhead.</p> <p class="lead">Together, we chart a course towards success, leveraging our expertise and experience to ensure your company reaches its full potential.</p> </div> </div> ```

[3] DANIEL:

I have this text block which I want to pair with one of the existing video(s). Please read the transcripts and pick one video that best fits to paragragh below:

"You've built something solid: steady revenue, loyal customers, respect in the market. But when critical opportunities, unexpected challenges and threats arise, your setup lacks the bandwidth and experience to ensure the outcome. That's the spark behind Pilot Advisors: 29+ years as a fractional leadership provider, embedding hybrid expertise to turn good into legendary. Deep down, every leader knows their current operating rhythm wasn't designed or engineered for “future” moments like this. Fractional services are designed and proven to offer precisely what is needed—and none of what isn’t. Think of the impact you will have with your stakeholders when you beat the odds and at the same time develop your in house leadership? Maybe more importantly, what will it be like to do that while reducing the burden you have had to carry?"

[4] GROK:

The provided paragraph is a promotional message that emphasizes the value of fractional leadership services—specifically how Pilot Advisors provides targeted, experienced support for critical moments, turns "good" companies into "legendary" ones, develops in-house leadership, delivers exactly what’s needed without excess overhead, and reduces the personal burden on the leader.

After reviewing all the transcripts, the best-matching video is:

What is a Fractional COO (https://www.youtube.com/watch?v=pzMPljomdgI)

Why this video fits best:

It is the only transcript that directly explains fractional leadership/COO services, their structure, and their benefits—matching the paragraph’s core focus on "fractional services" and "29+ years as a fractional leadership provider."
It repeatedly highlights turning "good" organizations into "great" ones, achieving sustainable gains, building self-sufficient teams, and making the external support eventually unnecessary—mirroring phrases like "turn good into legendary," "develop your in house leadership," and "reducing the burden you have had to carry."
It addresses the exact pain point in the paragraph: companies that are solid but lack the bandwidth/experience for critical opportunities or threats, and how fractional expertise fills that gap precisely without unnecessary overhead.
It includes tangible outcomes (e.g., 25-40% metric improvements, engagement pays for itself in months) and the idea of leaders regaining time for strategic work—aligning with "beat the odds," "impact with stakeholders," and lightening the leader’s load.
The closing invitation to connect for enterprises ready to "regain time, build self-sufficient teams, and achieve sustainable quarterly gains" echoes the paragraph’s reflective, aspirational tone.

The other videos are primarily personal backstory (father’s influence, education, military/covert work, early entrepreneurship, founding Pilot Advisors) or topical (defensiveness in leadership). They mention Pilot Advisors only briefly or in passing, and none center on the fractional services model itself the way this one does.

This fractional COO video is the clearest and most direct thematic match for pairing with your paragraph.

[5] DANIEL:

I'm using an owl-carousel and I'd like to make the background of the div a light silver or grey. can you show me where to add the code?

[6] GROK:

```html  <div class="owl-carousel" style="background-color: #f5f5f5;" data-plugin-options="{'items': 4, 'autoplay': true, 'autoplayTimeout': 3000}">

</div> ```

```html  <div class="owl-carousel bg-light" data-plugin-options="{'items': 4, 'autoplay': true, 'autoplayTimeout': 3000}">

</div> ```

```html  <div class="owl-carousel carousel-light-bg" data-plugin-options="{'items': 4, 'autoplay': true, 'autoplayTimeout': 3000}">

</div> ```

``css / Add this to your stylesheet / .carousel-light-bg { background-color: #f5f5f5; / Light silver/gray - adjust hex as needed / / Or use: background-color: #e9ecef; for a slightly darker Bootstrap-style gray / / Or: background-color: lightgray; for the named color / } ``

Notes:

#f5f5f5 is a very light silver/gray that's commonly used for subtle backgrounds.
If the background isn't showing as expected, it's because Owl Carousel wraps content in .owl-stage-outer. In that case, target it more specifically:

``css .owl-carousel .owl-stage-outer { background-color: #f5f5f5; } ``

The inline style (Option 1) or Bootstrap bg-light (Option 2) usually works fine for most setups.
Pick whichever approach fits your project best!

[7] DANIEL:

I'd like the 4 slides that display at any moment to be horz. centered rather than flush left. How is this done?

<div class="p-lg" style="background-color: #E0E0E0;"> <div class="owl-carousel mt-lg" data-plugin-options="{'items': 4, 'autoplay': true, 'autoplayTimeout': 3000}"> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Century21-Business-News-1.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Century21-Business-News-2.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Royal-Oaks-Country-Club-Andrew-Bielat-What-is-a-fractional-COO.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Book-Talk-.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Pilot-Advisors-Fractional-COO.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Camas-Life-Magazine-Andrew-Bielat-Romano-Capital.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/The-Money-Show-Andrew-Bielat-Investor-Expert.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Tri-Cities-Journal-of-Business.webp" style="width:80%" title="" /> </div> </div> <div style="height:30px;"> </div>

[8] GROK:

``html <div class="p-lg" style="background-color: #E0E0E0;"> <div class="owl-carousel mt-lg" data-plugin-options="{'items': 4, 'autoplay': true, 'autoplayTimeout': 3000}"> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Century21-Business-News-1.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Century21-Business-News-2.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Royal-Oaks-Country-Club-Andrew-Bielat-What-is-a-fractional-COO.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Book-Talk-.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Pilot-Advisors-Fractional-COO.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Camas-Life-Magazine-Andrew-Bielat-Romano-Capital.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/The-Money-Show-Andrew-Bielat-Investor-Expert.webp" style="width:80%" title="" /> </div> <div> <img alt="" class="img-fluid pb-md mx-auto" src="/portals/0/Images/PhotoGallery/Andrew-Bielat-Tri-Cities-Journal-of-Business.webp" style="width:80%" title="" /> </div> </div> <div style="height:30px;"> </div> </div> ``

What changed and why:

Added the Bootstrap class mx-auto to every <img> (e.g., class="img-fluid pb-md mx-auto").
mx-auto applies margin-left: auto; margin-right: auto; and works perfectly with display: block (which .img-fluid already provides).
This horizontally centers each 80%-width image inside its carousel item (.owl-item), creating even spacing on both sides.
Since Owl Carousel makes the 4 visible items fill the container width equally (25% each), centering the images inside them makes the entire group of 4 slides appear symmetrically centered instead of pushed/flush to the left.

This is the cleanest, most reliable fix—no need to touch the Owl options or add custom CSS. Just apply mx-auto to all the images as shown. It will look balanced on all screen sizes.

[9] DANIEL:

I have a parallax section that I want the minimum height to be 400 px. Should i add more text to the left panel, or a padding, or designate min-height in the section?

<div class="container-fluid"> <div class="row"> <div class="col-md-6 p-none"> <section class="section section-primary pl-lg pr-lg match-height"> <div class="row"> <div class="col-md-12"> <h4 class="mb-none">Fractional COO</h4> <h6><Andrew Bielat</h6> <p class="mb-none"> The mission of Pilot Advisors is to find and implement best practices, helping clients become the best possible companies </p> </div> </div> </section> </div> <div class="col-md-6 p-none"> <section class="parallax section section-parallax match-height" data-plugin-parallax="parallax" data-plugin-options="{'speed': 5.5, 'offset': 420}" data-image-src="https://pilotadvisors.net/portals/0/images/content/parallax-plot.jpg"></section> </div> </div> </div>

[10] GROK:

``html <div class="container-fluid"> <div class="row"> <div class="col-md-6 p-none"> <section class="section section-primary pl-lg pr-lg match-height d-flex align-items-center" style="min-height: 400px;"> <div class="container"> <div class="row"> <div class="col-md-12"> <h4 class="mb-none">Fractional COO</h4> <h6>Andrew Bielat</h6> <p class="mb-none">The mission of Pilot Advisors is to find and implement best practices, helping clients become the best possible companies</p> </div> </div> </div> </section> </div> <div class="col-md-6 p-none"> <section class="parallax section section-parallax match-height" data-plugin-parallax="parallax" data-plugin-options="{'speed': 5.5, 'offset': 420}" data-image-src="https://pilotadvisors.net/portals/0/images/content/parallax-plot.jpg" style="min-height: 400px;"> </section> </div> </div> </div> ``

Recommendation: Designate `min-height` in the section (best option)

Why min-height is the correct choice:

- Adding more text just to fill space is not semantic/clean — it bloats content unnecessarily. - Padding can help, but it’s indirect and harder to control precisely (you’d have to guess padding values to reach ~400px, and it behaves differently on various screen sizes). - min-height: 400px; directly guarantees the section will never be shorter than 400px, while still allowing it to grow taller if the left-side content needs more room.

Where I added it:

- Inline style="min-height: 400px;" on both the primary section (left) and the parallax section (right). - This works perfectly with your existing match-height class — the two columns will always be equal height, and now they’ll be at least 400px tall.

Bonus improvements I added:

- Wrapped the inner content of the left section in an extra .container → .row for better centering/alignment (common in Porto/theme setups). - Added Bootstrap flex classes d-flex align-items-center to the left section so the text is vertically centered when the height stretches to 400px+ (looks much more professional than top-aligned text in a tall section).

This will give you a clean, responsive parallax area that’s always at least 400px tall, with balanced columns and centered text on the left. No extra dummy text or padding hacks needed.

[11] DANIEL:

Hey Grok would you help pick a video which pairs with one of these video transcripts please. The page body text is: Do Any Of These Resonates With You Right Now?

I privately know we aren’t going to meet expectations, but we will do our best.

We're performing well... but there's untapped potential we miss out on every year.

The bar just rose dramatically—board, investors, or market won't wait.

Margins are tight, hope is thinning, key people are probably looking elsewhere.

I'm the bottleneck—vision and motivation get buried in the daily firefighting.

We've faced this before... and I need real leverage, not another full-time role.

I've stepped into these situations with more than 90 organizations and have developed a powerful approach to helping leaders achieve breakthrough success.

[12] GROK:

Andrew Bielat's Pilot Advisors Story (https://www.youtube.com/watch?v=RwtFGBE8YxQ)

Why this video pairs best with your page

text: Your page copy focuses on common leadership pain points—missing expectations, untapped potential, rising pressure from stakeholders, tight margins, the leader becoming the bottleneck, and needing real leverage without adding another full-time role. It then positions Andrew as someone who has stepped into these exact situations with 90+ organizations and developed a proven approach for breakthrough results.

This video aligns most closely because:

It directly addresses the moment when effort alone is no longer enough: “every company reaches a point where effort alone is insufficient, and Pilot Advisors steps in when the pace feels unsustainable or direction unclear.” This mirrors several of your bullets (untapped potential, bottleneck leader, firefighting burying vision, needing leverage).
It emphasizes Andrew’s broad experience across industries (Fortune 100, Pentagon, nuclear power, heavy manufacturing) and his decision to leave a single COO role to help many companies—reinforcing the “stepped into these situations with more than 90 organizations” claim.
The core mission repeated throughout—“help clients become the best possible company they can become” and applying principles of clarity, accountability, and disciplined execution—ties directly to your closing line about a “powerful approach to helping leaders achieve breakthrough success.”
The personal backstory (father’s influence, perseverance through college/career obstacles) adds authenticity and relatability without shifting focus away from the business challenges.

The other transcripts:

Andrew Bielat on Pilot Advisors is very similar (almost overlapping content), but the longer “Pilot Advisors Story” version has the explicit “effort alone is insufficient” line that echoes your pain points most precisely.
Defensiveness is more topical (mindset/AI resistance) and doesn’t address the operational/leadership bottlenecks as directly.
The short Andrew Bielat Story is purely childhood/early entrepreneurship and lacks the professional experience tie-in.

This video will feel like a natural, reinforcing companion to your page text—showing viewers the experienced leader who understands their exact struggles and has built Pilot Advisors specifically to solve them.

[13] DANIEL:

is there a bootstrap or html style or class I can use on a set of 5 image thumbnails [100px x 100px] which will make a small change in the image on-hover so the user knows it is linked. The lightbox effects i have only work on much larger images. For example:

[14] GROK:

```css / Add this to your custom stylesheet or <style> block / .portfolio-list .portfolio-item { transition: transform 0.3s ease, box-shadow 0.3s ease; }

.portfolio-list .portfolio-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.22); } ```

No changes needed to your HTML — this targets the existing .portfolio-item containers.

Why this works well for small 100px thumbnails:

On hover, each thumbnail "lifts" upward slightly and gains a stronger shadow — a clear, modern indication it's clickable.
No size increase (avoids clipping/overlap issues that scale can cause in themes with overflow: hidden on wrappers like thumb-info).
Subtle but noticeable, works perfectly in a centered flex row.
Pure CSS, no extra classes or inline styles required.

If you prefer a different subtle effect (e.g., slight scale + fade, safe even if clipped):

```css .portfolio-list img { transition: transform 0.3s ease, opacity 0.3s ease; }

.portfolio-list a:hover img { transform: scale(1.05); opacity: 0.9; } ```

Or, if you're on Bootstrap 5+, the simplest no-CSS option is to add link-opacity-75-hover (or link-opacity-50-hover for stronger) to each <a>:

``html <a class="link-opacity-75-hover" title="ask Grok" href="..." target="_blank"> <img ... /> </a> ``

This fades the image slightly on hover using built-in Bootstrap utilities. Pick whichever fits your setup best!

[15] DANIEL:

I think I need to use the inline style for the effect on hover (transform: scale(1.05); opacity: 0.9;). Would you write that please

[16] GROK:

```html <div style="height:50px;"> </div> <div class="container-fluid"> <div class="row portfolio-list d-flex justify-content-center align-items-center">

<div class="portfolio-item"> <div class="portfolio-item overlay-zoom p-3 text-center"> <div class="thumb-info thumb-info-hide-wrapper-bg"> <div class="thumb-info-wrapper"> <a title="ask Grok" href="https://andrewbielat.pilotadvisors.net/ask_ai_grok" target="_blank"> <img alt="ask Grok" src="https://pilotadvisors.net/portals/0/images/logo/ask_grok_100x.png" class="img-fluid" style="transition: transform 0.3s ease, opacity 0.3s ease;" /> </a> </div> </div> </div> </div>

</div> </div>

<style> .portfolio-list a:hover img { transform: scale(1.05); opacity: 0.9; } </style> ```

Why this is the best approach:

Inline style is used on each <img> for the transition (smooth animation) — this is the only part that works inline.
The actual hover effect (scale + opacity) must be in CSS (pseudo-class :hover can't be done purely inline without JavaScript).
This targets precisely via .portfolio-list a:hover img so it only affects these thumbnails.
Subtle, modern, and indicates clickability without being overwhelming on small 100×100 images.
If your theme's .thumb-info-wrapper has overflow: hidden (common for zoom effects), the scale might get slightly clipped at the edges. If that happens, let me know — we can switch to the "lift + shadow" effect instead (safer, no clipping).

Just copy the inline style="transition: ..." to every <img> and add the <style> block once. It’ll work perfectly!

[17] DANIEL:

Something isn't working. Here's what I have:

[18] GROK:

```html <div style="height:50px;"> </div> <div class="container-fluid"> <div class="row justify-content-center align-items-center">

<style> / Base transition on the images (kept inline or moved here for cleanliness) / .ai-thumbnail img { transition: transform 0.3s ease, opacity 0.3s ease; }

/ Hover effect – this is what makes the change happen / .ai-thumbnail a:hover img { transform: scale(1.05); opacity: 0.9; }

/ Optional: make the link act like a button (pointer cursor + no underline) / .ai-thumbnail a { display: block; cursor: pointer; } </style>

<div class="col-auto mb-4 ai-thumbnail"> <a title="ask Grok" href="https://andrewbielat.pilotadvisors.net/ask_ai_grok" target="_blank"> <img alt="ask Grok" src="https://pilotadvisors.net/portals/0/images/logo/ask_grok_100x.png" class="img-fluid" /> </a> </div> <div class="col-auto mb-4 ai-thumbnail"> <a title="ask Claude" href="https://andrewbielat.pilotadvisors.net/ask_ai_claude" target="_blank"> <img alt="ask Claude" src="https://pilotadvisors.net/portals/0/images/logo/ask_claude_100x.png" class="img-fluid" /> </a> </div> <div class="col-auto mb-4 ai-thumbnail"> <a title="ask ChatGPT" href="https://andrewbielat.pilotadvisors.net/ask_ai_chatgpt" target="_blank"> <img alt="ask ChatGPT" src="https://pilotadvisors.net/portals/0/images/logo/ask_chatgpt_100x.png" class="img-fluid" /> </a> </div> <div class="col-auto mb-4 ai-thumbnail"> <a title="ask Perplexity" href="https://andrewbielat.pilotadvisors.net/ask_ai_perplexity" target="_blank"> <img alt="ask Perplexity" src="https://pilotadvisors.net/portals/0/images/logo/ask_perplexity_100x.png" class="img-fluid" /> </a> </div> <div class="col-auto mb-4 ai-thumbnail"> <a title="ask Gemini" href="https://andrewbielat.pilotadvisors.net/ask_ai_gemini" target="_blank"> <img alt="ask Gemini" src="https://pilotadvisors.net/portals/0/images/logo/ask_gemini_100x.png" class="img-fluid" /> </a> </div> <div class="col-auto mb-4 ai-thumbnail"> <a title="View 196 syndicated versions of this content" href="https://syn.pilotadvisors.net/syn-us?na=224" target="_blank"> <img alt="View 196 syndicated versions of this content" src="https://pilotadvisors.net/portals/0/images/logo/Syndication_100x.png" class="img-fluid" /> </a> </div>

</div> </div> ```

Why this fixes the "not working" issue:

The hover effect (scale(1.05) + opacity: 0.9) cannot be done purely inline — it requires a CSS :hover rule. That's why nothing was happening before.
I added a small <style> block with the exact effect you wanted.
Moved the transition into CSS (cleaner, reusable) and added a custom class .ai-thumbnail to each wrapper so it only affects these thumbnails.
Switched .portfolio-item → .col-auto (Bootstrap best practice) for automatic responsive spacing/centering without extra classes. Added mb-4 for vertical breathing room on mobile.
display: block on the <a> ensures the full image area is clickable.
With the old wrappers removed, scale(1.05) will no longer clip — it should animate smoothly.

Copy-paste the <style> block once and use the updated item structure. The hover zoom + slight fade will now work perfectly on all six thumbnails! Let me know if you see any clipping or want a different effect (e.g., lift + shadow instead).

[19] DANIEL:

How do I get the images to stay in a horizontal row when they are on a tablet and a phone. Right now they spill into a single vertical column.

<div class="container-fluid"> <p class="center"><small>ask your ai about this</small></p> <div class="row justify-content-center align-items-center">  <div class="col-md-2 mb-4 ai-thumbnail"> <a title="ask Grok" href="https://andrewbielat.pilotadvisors.net/ask_ai_grok" target="_blank"> <img alt="ask Grok" src="https://pilotadvisors.net/portals/0/images/logo/ask_grok_100x.png" class="img-fluid" /> </a> </div> <div class="col-md-2 mb-4 ai-thumbnail"> <a title="ask Claude" href="https://andrewbielat.pilotadvisors.net/ask_ai_claude" target="_blank"> <img alt="ask Claude" src="https://pilotadvisors.net/portals/0/images/logo/ask_claude_100x.png" class="img-fluid" /> </a> </div> <div class="col-md-2 mb-4 ai-thumbnail"> <a title="ask ChatGPT" href="https://andrewbielat.pilotadvisors.net/ask_ai_chatgpt" target="_blank"> <img alt="ask ChatGPT" src="https://pilotadvisors.net/portals/0/images/logo/ask_chatgpt_100x.png" class="img-fluid" /> </a> </div> <div class="col-md-2 mb-4 ai-thumbnail"> <a title="ask Perplexity" href="https://andrewbielat.pilotadvisors.net/ask_ai_perplexity" target="_blank"> <img alt="ask Perplexity" src="https://pilotadvisors.net/portals/0/images/logo/ask_perplexity_100x.png" class="img-fluid" /> </a> </div> <div class="col-md-2 mb-4 ai-thumbnail"> <a title="ask Gemini" href="https://andrewbielat.pilotadvisors.net/ask_ai_gemini" target="_blank"> <img alt="ask Gemini" src="https://pilotadvisors.net/portals/0/images/logo/ask_gemini_100x.png" class="img-fluid" /> </a> </div> <div class="col-md-2 mb-4 ai-thumbnail"> <a title="View 196 syndicated versions of this content" href="https://syn.pilotadvisors.net/syn-us?na=224" target="_blank"> <img alt="View 196 syndicated versions of this content" src="https://pilotadvisors.net/portals/0/images/logo/Syndication_100x.png" class="img-fluid" /> </a> </div> </div> </div>

[20] GROK:

```html <div class="container-fluid"> <p class="text-center"><small>ask your ai about this</small></p>

<div class="col-4 col-md-2 text-center mb-4 ai-thumbnail"> <a title="ask Grok" href="https://andrewbielat.pilotadvisors.net/ask_ai_grok" target="_blank"> <img alt="ask Grok" src="https://pilotadvisors.net/portals/0/images/logo/ask_grok_100x.png" class="d-block mx-auto" style="width: 100px; height: 100px;" /> </a> </div>

</div> </div> ```

What changed and why it fixes the vertical

stacking on tablet/phone:

Added col-4 to every item: This gives ~33% width on all screen sizes (phones, tablets <768px). Result: 3 icons per row on smaller devices (2 clean rows for your 6 icons).
Kept col-md-2: Overrides on medium+ screens (≥768px, typical tablet landscape/desktop) to 6 icons in a single row.
Added text-center to each column: Perfectly centers the fixed-size image inside its column.
Removed img-fluid and set fixed width: 100px; height: 100px;: Keeps all logos exactly the same size on every device (no unwanted scaling/shrinking).
Added d-block mx-auto (via class on img): Centers the fixed-size image horizontally in its column.
Added g-4 to the row: Gives nice consistent spacing between icons (also provides room for your hover scale effect without overlap).

Now:

Phones & portrait tablets: 3 per row (horizontal groups, no single vertical column).
Landscape tablets & desktop: 1 full horizontal row, perfectly centered.

No horizontal scrolling needed, great mobile UX, and your hover effect (scale + opacity) will still work beautifully. Just make sure your <style> block from before is still on the page!

Ask Daniel's CODEX

Bootstrap Grid: Image and Text Layout

Why this video fits best:

Notes:

What changed and why:

Recommendation: Designate min-height in the section (best option)

Why this video pairs best with your page

Why this works well for small 100px thumbnails:

Why this is the best approach:

Why this fixes the "not working" issue:

What changed and why it fixes the vertical

Recommendation: Designate `min-height` in the section (best option)