Alignment of images in a grid layout using Bootstrap 4

I am currently working on constructing an image grid with Bootstrap 4. The grid is contained within the class "showcase." In the first row, there are two landscape photos, and in the second row, there are three portrait photos. My challenge is to align the portrait photos with the landscape photos - one to the left, one in the center, and one to the right. I aim for them to have consistent margins for a visually appealing layout.

I have attempted various methods such as researching online and adjusting margins independently. I experimented with classes like "row-sm-4" but haven't achieved the desired outcome.

<div class = "showcase">
              <!-- First row with 2 landscape wallpapers -->
              <div class = "row" id = "land">
                <div class = "col">
                      <img src="img/land1.jpg" class="rounded float-left" alt = "Landscape wallpaper" width = "500" height = "350">
                      <img src="img/land2.jpg" class="rounded float-right" alt = "Landscape wallpaper" width = "500" height = "350">
              </div>
            </div>
              <!-- Second row with 3 portrait wallpapers-->
              <div class = "row" id = "port">
                <div class = "col-bg-4">
                  <img src="img/p1.jpeg" class="rounded float-left" id = "firstp" alt = "Portrait wallpaper" width = "200" height = "350">
                  <img src="img/p2.jpg" class="float-center" id = "secondp" alt = "Portrait wallpaper" width = "200" height = "350"> 
                  <img src="img/p3.jpg" class="rounded float-right" alt = "Portrait wallpaper" width = "200" height = "350">  
              </div>
            </div>
          </div>

The objective is to ensure all photos display with equal margins on both sides.

htmlcsstwitter-bootstrapimagebootstrap-4

Answer №1

If I grasp your meaning correctly, it seems like you need to organize the images into specific columns. For instance:

You should place your 2 landscape images in two columns with a span of 6 each.

For your 4 portrait images, they should be distributed across 3 columns with a span of 4 for each.

Your code structure should resemble this:


           <div class = "showcase">
              <!-- First row with 2 landscape wallpapers -->
              <div class = "row" id = "land">
                <div class = "col-6">
                      <img src="img/land1.jpg" class="rounded" alt = "Landscape wallpaper" width = "500" height = "350">
                </div>
                <div class="col-6">
                      <img src="img/land2.jpg" class="rounded" alt = "Landscape wallpaper" width = "500" height = "350"> 
                </div>
              </div>
            </div>
              <!-- Second row with 3 portrait wallpapers-->
              <div class = "row" id = "port">
                  <div class="col-4">                  
                      <img src="img/p1.jpeg" class="rounded" id = "firstp" alt = "Portrait wallpaper" width = "200" height = "350">
                  </div>
                  <div class="col-4 text-center">                  
                      <img src="img/p2.jpg" class="" id = "secondp" alt = "Portrait wallpaper" width = "200" height = "350"> 
                  </div>

                  <div class="col-4">
                       <img src="img/p3.jpg" class="rounded" alt = "Portrait wallpaper" width = "200" height = "350">
                  </div>  
              </div>
          </div>

I hope this helps! Feel free to ask if you encounter any issues. Also, remember that you can remove the float attributes.

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

Text enhancement with text-shadow in jQuery and CSS

Before I reached out, I had been searching for a solution. In the process of building my website, I decided to incorporate text-shadow. It seemed straightforward, but turned out to be more complicated than expected. I discovered that IE does not support ...

jquerycss

Menu navigation with animated transitions - Not achieving the desired result

Recently, I posted this question and received a fantastic answer. However, now my client is requesting a hover animation for the navigation items. I started exploring jQuery Spritely as it seemed like the perfect solution. Unfortunately, despite my efforts ...

jquerycss

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

pythonhtmlcssdjango

Extracting data from a database using PEAR for Excel: Enumerating columns

One aspect of my website allows users to extract an Excel file using data from a database, with the help of the PEAR library. The Excel table that is generated currently has 32 columns. My main goal is to insert a 33rd column that assigns a number startin ...

phpjavascripthtmlexcelpear

What is the method for pulling information from MySQL and presenting it on a website using Node.js?

Currently, my goal is to retrieve data from MySQL and showcase it on my HTML page. The code snippet in server.js looks like this: const path = require('path'); const express = require('express'); const bodyParser = require("body-pa ...

javascripthtmlmysqlnode.jsexpress

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

javascriptphpjsonhtmlserver-sent-events

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

javascripthtmlcssfunctionweb

The ng-include feature seems to be malfunctioning

After building a basic web page using AngularJs, I ran into an issue when attempting to integrate header.htm into index.html - nothing was displaying in the browser. index.html <html> <script src="https://ajax.googleapis.com/ajax/libs/angul ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-include

Accessing and displaying a randomly selected PDF file from a directory using HTML coding

Welcome to my recipe collection website where I document all the delicious recipes I love to eat. One feature I would like to add is a 'random' button, so that a recipe will be selected at random for me without having to make a decision. Althou ...

htmlfilepdfrandomrandomaccessfile

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

Omitting an element from the CSS styling

How can I create a CSS selector that targets the text content within this snippet, excluding the <label> component? Essentially, I want to style the text in the div while leaving the label unchanged. <div id="edit-cc" class="form-item form-type ...

htmlcss

Adjust the hyperlink color of <a> to change when hovering over <tr>

When I hover over a <tr> tag, I want the color of the associated <a> element to change to white. I attempted to achieve this using jQuery in the following way: <script> $('tr').hover(function(){ $('a').cs ...

jqueryhtmlcss

Incorporating an SVG Element into a design while ensuring its responsive functionality

I tried adding an SVG wave type picture to my background and making it responsive, but encountered some issues. I wanted to enhance the look of my existing background image by incorporating a wave design. However, when I zoomed in on the website, the new a ...

htmlcsssvgresponsive-design

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

javascripthtmlangulartypescript

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

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

My goal is to assign true or false values to selected radio buttons in each row and then form an object for submission. To distinguish between the radio button values in each row, I have used {{k}}+{{sizeobj.rbSelected}} as the value which is causing issue ...

htmltypescriptangular5

How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar: .navbar { overflow: hidden; !important; background-color: #333; !important; } .. ...

htmlcssbootstrap-4thymeleafnavbar

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss