What is the best way to create a gallery using Bootstrap 4?

I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section.

https://i.stack.imgur.com/0Zfr5.jpg

My goal is to recreate the gallery using a .container with nested rows, but I've been struggling to achieve it. Here's the code I have so far:

<div class="container-fluid">
            <div class="row">
              <figure class="col-6">
                  <img src="img/img8.jpg" class="img-fluid" alt="">
              </figure>
              <div class="col-6">
                  <div class="row">
                      <figure class="col-12">
                          <img class="col-5" src="img/img13.jpg" class="img-fluid" alt="">
                          <img class="col-5" src="img/img10.jpg" class="img-fluid" alt="">
                          <img class="col-5" src="img/img13.jpg" class="img-fluid" alt="">
                          <img class="col-5" src="img/img10.jpg" class="img-fluid" alt="">  
                      </figure>                    
                    </div>            
                </div>
              </div>                                                                        
          </div>
cssbootstrap-4html

Answer №1

Give this layout a try, it might be useful.

<div class="container main">

    <div class="row">
        <div class="col-sm-6">
           <img src="yours" alt="" class="img-responsive center-block">
        </div>
        <div class="row col-sm-6">
            <div class="col-xs-6">
              <img src="yours" alt="" class="img-responsive">
            </div>
            <div class="col-xs-6">
              <img src="yours" alt="" class="img-responsive">
            </div>
            <div class="col-xs-6">
              <img src="yours" alt="" class="img-responsive">
            </div>
            <div class="col-xs-6">
              <img src="yours" alt="" class="img-responsive">
            </div>
        </div>
    </div>
</div>

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

JQuery Scroll Spy Implementation

I have structured the page with a header at the top and 3 columns below. The left column contains a menu, the middle column is a text container, and the right column is another section. As the page scrolls up, the menu becomes fixed in position which func ...

jqueryhtmlcss

Guide on how to add multiple options to a select element in HTML using prototype.js

What is the best way to add multiple options to a select tag in HTML using prototype js? Appreciate your help. ...

javascripthtmlprototypejs

What location is most ideal for incorporating JavaScript/Ajax within a document?

Sorry for the seemingly simple question, but I would appreciate some clarification from the experts. When it comes to the three options of placing JavaScript - head, $(document).ready, or body, which would be the optimal location for ajax that heavily rel ...

javascripthtmljqueryajaxjquery-events

Use jQuery ajax to send form data and display the received information in a separate div

I'm working on a PHP test page where I need to submit a form with radios and checkboxes to process.php. The result should be displayed in #content_result on the same page without refreshing it. I attempted to use jQuery Ajax for this purpose, but noth ...

phpjqueryhtmlajaxfixed

Ways to stop two JavaScript files from running at the same time

After combining two JavaScript files, I am facing some issues. The first file handles validation while the second one has an ajax plugin for form submission after validation. When I include these files in the header section, they both run simultaneously. H ...

javascriptjqueryhtmlajaxvalidation

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet? div.example { width: 560px; height: 750px; display: block; padding: 10px 20px; color: black; background: rgba(255, 255, 255, 0.4); -webkit-border ...

jqueryhtmlcssjquery-ui

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

javascripthtmlcss

The versatility of Node.js' hbs module as an engine

Recently diving into the world of node js, I stumbled upon the hbs module. In this code snippet below: app.set('view engine', 'html'); app.engine('html', require('hbs').__express); I'm curious to know more abo ...

htmlnode.jsexpressviewengine

Inherit margins from child elements with fixed positions

Below is a very basic code example to consider: <div id="parent"> <div id="child"> Test it </div> </div> This code snippet includes the following CSS styles: #parent{ position:relative; margin-left:200px; color:#FFF; } #chi ...

htmlcss

Expanding <a> element to cover the entire <li> container

Take a look at this straightforward menu layout: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> I'm looking to expand the <a> element so that it ...

htmlcssxhtml

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styling but haven't been successf ...

csshtml

Escape key does not close the modal dialogue box

I’ve customized the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on a webpage. Although it functions as intended, I’m struggling to implement a way to close it by pressing the escape ...

javascripthtmlcssmodal-dialog

What is the best method to eliminate the "All Files" selection from a file input dialog

<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...

html

The jQuery click event does not fire within a bootstrap carousel

I am trying to set up a bootstrap carousel where clicking on an image inside it will trigger a self-made lightbox. However, I am facing some issues with the JavaScript code not being triggered with the following syntax: $('html').on("click", ".l ...

javascriptjqueryhtmltwitter-bootstrap

Execute a webpage in the background using PHP

Currently, I'm working on creating a basic PHP script to fetch four images from a server. The catch is that each time I retrieve a new image, I have to access a webpage first - like this: http://example.com/Set.cgi?Image=1 I don't have the abili ...

phpcgihtml

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

javascriptjqueryhtmlcssjquery-animate

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

What is the best way to develop a JavaScript function that divides the total width by the number of table headers (`th`)?

I recently came across this amazing scrollable table on a website, but I'm facing an issue with resizing the headers equally. Due to my lack of knowledge in JavaScript, I'm uncertain about how to tackle this problem. My intuition tells me that a ...

javascriptjqueryhtml

A step-by-step guide on changing the class of a focused contenteditable element with a button click using jQuery

I need assistance changing the class of an element within a contenteditable div. Here is my current code: <button>swap class</button> <div contenteditable="true"> <h1 class="line-height-1">Your Headline Here</h1> </di ...

javascriptjqueryhtmlcontenteditableclassname