As I delve into learning Bootstrap 5, I am experimenting with creating a more "advanced" layout. The idea is to have two images positioned next to each other with titles below them, and a div centered between both. Ultimately, they will be displayed in a row of three horizontally.
If you are curious about what I'm aiming for, click here.
I've tried several versions of this layout, but none look quite right. Any advice or suggestions on how to achieve this would be greatly welcomed. Thank you!
I have created a solution for you based on the image you provided. Hope you like it! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e928e93">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<title>Bootstrap Example</title>
</head>
<body>
<div class="container">
<div class="row position-relative">
<div class="image1 w-50 col-6"></div>
<div class="image2 w-50 col-6"></div>
<div
class="circle rounded-circle position-absolute top-50 start-50 translate-middle"
></div>
</div>
<div class="row">
<div class="title1 col-6 text-center">Title 1</div>
<div class="title2 col-6 text-center">Title 2</div>
</div>
</div>
</body>
<style>
.image1 {
height: 300px;
background: red;
}
.image2 {
height: 300px;
background: blue;
}
.circle {
width: 100px;
height: 100px;
background: black;
}
.title1 {
background: purple;
}
.title2 {
background: green;
}
</style>
</html>When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...
I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...
Trying to make this function: The current issue I'm facing is that when changing a digit (by clicking on a hexagon), I want to save the selected number as the value of a hidden input field next to the digit in the DOM. Any ideas on how to achieve th ...
The issue is with the alignment of the second row of textbox elements under the "Add Equipment" section on this page: While organizing the code in Dreamweaver, the elements line up correctly. However, when viewed in Google Chrome, they shift to the second ...
There have been numerous solutions provided on Stack Overflow for handling JavaScript windows, but my situation is quite unique. I am currently working on automating a process for our web-based application. The development team recently implemented a MODA ...
Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...
I have been trying to incorporate sortable columns into my HTML table and decided to experiment with the jquery tablesorter. I have followed the syntax below, but for some reason, my table is not allowing me to sort. Can you help me understand why? &l ...
My experience with file uploads in Internet Explorer is causing some issues. While other browsers work smoothly when canceling file uploads, Internet Explorer seems to have a different behavior. In other browsers, clicking the "Cancel" button during a fil ...
I'm trying to figure out how to call another script from an HTML page that is being served by my node project's localhost server. Here's the basic setup: index.js var http = require('http'); var fileSystem = require('fs' ...
I am currently working on a form that includes a JavaScript submit function. Within the form, there are 3 anchor tags that I want to use to set different values to a hidden parameter when submitted based on the link clicked. Although the form submission w ...
I am currently working on setting up a simple node.js server for my HTML using http and express. Everything is functioning properly, but the CSS is not displaying as expected. Here is the code snippet for my server setup: const express = require("express ...
Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a <link rel="stylesheet"> tag in the <head> section, while jQu ...
When I hover over a particular color, I want the button to show up. However, instead of displaying the button only for that color, it appears for all the colors of the product. Also, the placement of the button on the left side means that if I try to hover ...
There seems to be an issue with the border being hidden. I've tried adjusting the background-position variables, but without success. Here is a code example: * { margin: 0; padding: 0; } .container { max-width: 1170px; width: 100%; ...
Whenever I find myself needing to style my React elements, I end up using the style attribute instead of className. None of the examples I've come across seem to apply styles that fit my specific needs. Can you shed some light on why this happens and ...
Is there a way for the Army class to automatically update its CP property with the sum of CP values from all Detachments in the Detachment class? In the Army class, the CP property should reflect the total CP value from all Detachments and be accessible t ...
Simple enough. I am struggling to get my button to generate the necessary input upon clicking. The fields should populate where the "household" class is located. I am limited to editing only Javascript and not HTML. Any suggestions? HTML: <ol ...
Let me show you how it currently looks: https://i.sstatic.net/OeHRg.png The maximum width of the cell is working properly, but the text is not wrapping to a new line as expected. Instead, it overflows out of the cell. Here is the CSS applied to the tabl ...
Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...
Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...