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

The Mantine date picker is causing an error stating that objects are not valid as a React child

I'm currently experimenting with utilizing Mantine Date in NextJS. The goal is to have the selected date displayed in the HTML text heading when a user clicks on it. For instance, if a user selects January 1st, 2023, the text should show like this: Da ...

javascripthtmlreactjsnext.js

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

Following the jquery hover function, the css hover feature ceases to work. In my html, there are multiple svg elements. A jquery script is applied where hovering over a button at the bottom triggers all svg elements to change color to yellow (#b8aa85). S ...

javascriptjquerycsshovermouseover

BlendModeGlobal operations

Experimenting with the globalCompositeOperation property in a loop by passing different strings (source-atop, source-over, etc.) to the same 2D context, I observed that Firefox only allowed me to draw a few shapes while Opera only displayed the last one. ...

javascripthtmlcanvas

Issue with implementing styles on Navbar React component

I'm currently learning Next.js, specifically working with version 10.0.3. In my project, I am using react-bootstrap version 1.4.0 and classnames version 2.2.6. Within my project, I have a component called Navbar that I am trying to style in a certain ...

cssreactjsnext.jsstyled-jsx

Button inside table cell not showing Bootstrap tooltip

I've implemented a feature where each row in a table has a button that triggers a pop-up modal when clicked. I want these buttons to display tooltips when hovered over and when focused. Below is an example of the HTML structure: <link hr ...

javascripthtmltooltipbootstrap-5

Selenium - Struggling to locate elements that are undeniably present on the website

I started a fun side project to automate tasks on the website using Selenium to automatically complete all achievements. You can check out my code on GitHub: https://github.com/jasperan/pyfastfingers However, I've run into an issue with the login pa ...

pythonhtmlseleniumautomation

Adjust the size of both the right and left price scales on TradingView Lightweight Charts

Is it possible to set a fixed width for both the right and left price scales on a chart? Let's say, 50 pixels for the right price scale and 70 pixels for the left price scale? For a working example, please visit https://jsfiddle.net/TradingView/cnbam ...

javascriptcssscaletradingview-apilightweight-charts

Utilize HTML5 to enable fullscreen functionality for embedded SWF files

I have implemented a function that handles the click event of a button to toggle a DOM element into fullscreen mode. The function works well, but I am facing an issue when there is another div containing a swf inside the main div. var elem = document.getE ...

javascripthtmlflash

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

Font Awesome symbols using the class "fa-brands" are not functioning as expected

I have included a font awesome library in the header using the following code: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> However, when I try to display an ic ...

htmlcssfont-awesome

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

As someone who is still learning JavaScript, I've come across a particular issue. Within a webpage, there is a select dropdown as shown below: <select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}&qu ...

javascripthtmljqueryjquery-events

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

javascriptcssreactjssvglinear-gradients

Extract content from whole webpage including HTML, CSS, and JavaScript

Currently I am working on developing a webpage version control backup/log system. The goal is to automatically save a static copy of the webpage, including all its CSS and JavaScript files, whenever there are any changes made. I have already figured out h ...

javascriptcssgoweb-scraping

Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged. I've done my research and tried various solutions like: - Setting WebView.scalesPageToFit = true - Applying default con ...

ioscssswiftuiwebview

Passing a variable to the render method in a PDF document

I'm currently working on a project with Django where I need to convert an HTML monthly report into a PDF. The data for the report is retrieved from a database based on the selected month. I am facing an issue in sending the selected month from the HTM ...

htmlcssdjangoclasspdf

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

As a newcomer to Javascript, I am seeking assistance with validating each field in the form below without having to click on the submit button. Your help is greatly appreciated! <form action="" id = "form1" class = "form-group row"> & ...

javascripthtmlbootstrap-4

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

javascripthtmlcss

Combining several files into a single variable to encode

I'm encountering an issue with the multiple file upload option. Even though it shows that 2 files have been uploaded, when I try to print the encoded value in the console, it only encodes and takes the value of my last uploaded file. How can I encode ...

javascripthtml