Encountering issues with the Bootstrap image gallery display

I'm a newcomer to Bootstrap and I want to create an image gallery. This is what I expect:

https://i.sstatic.net/DKxMC.jpg

However, what I'm getting looks like this:

https://i.sstatic.net/KkrAG.jpg

This is the HTML code I have so far:

<div class="row">
                    <div class="col-md-4">
                        <a href="#" class="thumbnail">
                            <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                        </a>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12">
                            <a href="#" class="thumbnail">
                                <img src="img/slider/slider-1.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <a href="#" class="thumbnail">
                                <img src="img/sell/5.jpg" class="img-responsive" alt="...">
                            </a>
                        </div>
</div>

Could someone please advise on how to correct my code?

twitter-bootstrapcssbootstrap-image-gallery

Answer №1

Your code is right on the money. The only issue here is that your left image doesn't match the height of the images on the right side.

If we look at the expected outcome, the left image should be the same height as the two rows of images on the right side. To solve this, you can either use a taller image on the right side or adjust the width of the left column to make it wider.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

choose image for select box background

Similar Question: Background Image for Select (dropdown) does not work in Chrome I am trying to update the background image of a select box to https://www.google.com/images/nav_logo101.png Currently, I am using the following code: <form> & ...

htmlcss

Enhance user experience with HTML-tags in tooltips

Is there a way to display a tooltip in Twitter Bootstrap that includes HTML tags for formatting? Currently, I am using the following code: <a class="my-tooltip" rel="tooltip" href="#" data-original-title="CPR + O<sub>2</sub>.">First-Aid ...

htmltwitter-bootstrap

Creating a diagonal rectangle with a flat bottom: A step-by-step guide

Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image: https://i.sstatic.net/tMgpd.png Now, what I'm aiming for is something like this: https://i.sstatic.net/xToz7.p ...

htmlcss

The act of resizing a window causes the text to be forcibly expelled from its containing div

When you hover over an image in a grid, text and a button appear. However, when the window is resized, the content ends up overflowing out of the div. This issue is part of my first project that I am working on during a bootcamp. I have decided to keep th ...

htmlcss

Can you tell me the CSS equivalent of the SASS/SCSS expression "&$"?

Hey there! I've been diving into the world of Material-UI components and stumbled upon this interesting styling snippet: root: (0, _extends3.default)({}, theme.typography.subheading, { height: theme.spacing.unit * 3, boxSizing: 'content- ...

cssreactjssassmaterial-ui

Show the image in its original form using the Transform feature

What is the best way to use CSS transform to achieve the same look as the image in the 2nd link? I tried skewY for the first image but it's not quite what I'm going for. https://i.sstatic.net/teV9e.jpg https://i.sstatic.net/m0vsh.jpg ...

htmlcsstransformskew

Adjusting CSS to realign images on various screen types

I am facing an issue with displaying a background image on a static web page. The height appears differently on various LCD screens. How can I ensure that the height adjusts to approximately 80% of the area? I have tried giving a percentage in the style fo ...

htmlcsstwitter-bootstrapbootstrap-4

The HTML select element - Styling the selected item using the option font

Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...

htmlcssuser-interface

Increasing the size of text in CSS with the use of ":hover" and then causing it to return to its original smaller size

Allow me to explain my goal here. I have text displayed on my website that I would like to enlarge when the user hovers over it and then shrink back down when they move their cursor away. The issue I'm facing is that after enlarging the text using t ...

javascripthtmlcsshover

Modal display malfunctioning

Recently, I've been experimenting with Modals on my website. However, I've encountered a small issue - when I try to add multiple modals, they all seem to be connected in some way. This means that I can't have different content in each modal ...

htmlcssmodal-dialogjscript

Enhancing an element with a modifier in CSS using BEM conventions without the need for @extend

Trying to grasp the best method for writing BEM modifier rules within parent classes. I've utilized SASS's @extend but question if this is the right approach. For example: If there is a class called .form structured like this: <div className= ...

csssassbem

Animations with the -webkit- prefix

I recently came across some CSS code that used the -webkit- prefix inside both @keyframes and @-0webkit-keyframes. This was part of a project called animate.css Do you think this is necessary? ...

cssanimationwebkitprefix

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

Preview not showing CSS changes properly

1) I am encountering an issue with displaying CSS in a form preview tab. Despite setting the CSS, it does not reflect on the fields after clicking the preview button. 2) Are there alternative methods to open the tab in a new window rather than opening it ...

javascriptjqueryhtmlcsspreview

Prevent Angular from automatically scrolling to the top when subscribing to a timer

I have a real-time updating list of orders that is scrollable. This is the main component, where the list gets updated every 2 minutes with the following setup: ngOnInit(): void { this.internalError = false; this.subscription = timer(0, 120 * 1000) ...

htmlcssangulartypescriptrxjs

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

I have a map.jsx file in my React application that contains the code below: import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <d ...

javascriptcssreactjsgoogle-maps

How come my script that is dependent on the viewport does not apply classes?

I created a code to add a class to a div, but it's not working as expected. I need help troubleshooting this issue. The code works fine on codePen, but not on my WordPress website. How can I make sure the browser executes this code properly? Link to ...

javascriptjquerycsswordpresselementor

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

What is the best way to connect CSS properties to an image using JavaScript?

I recently used JavaScript to insert an image into a webpage, but I'm unsure of how to make changes to it or position it properly. Is there a way to connect CSS styles to the image, or is there another method to modify it without relying on CSS? < ...

javascripthtmlcss

What is the best way to make sure images and text are properly aligned for different screen sizes

I'm a beginner with Bootstrap and could use some assistance. In my code, I have text and images divided into four columns with alignment set based on screen size using media queries in CSS. However, when resizing the window to tablet view (check Scre ...

htmlcsstwitter-bootstrapmobileresponsive