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>I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...
I have a question I'm eager to find an answer to. Here is the code snippet I'm working with: $('.comment').submit(function(event) { event.preventDefault() Every time I try to submit it, the page reloads instead of submitting th ...
I've coded some functions in my theme's functions.php file. Here is an example: $usrProfileHTML = <<<EOD <div class="eUserProfile"> <div class="eUsrImage"> <img src="{$envUserProfile['eUsrImage']}" a ...
I am looking for a solution to send post messages (window.postmessage) to iframes. Currently, it is functioning properly with a single iframe inside the parent page. However, I want it to also work for nested iframes. Here are the criteria: I should on ...
Here is the structure of my project folder: XYZ_PROJECT_FOLDER ASSETS CSS IMAGES JS VENDOR CONTACT.html INDEX.html INDEX.js In the INDEX.js file, I have included code to render all the static files and routing logic: const e ...
Having some trouble passing a C# list parameter to a jQuery method using onclick. It seems like the brackets [] and special characters in the string values are causing issues. For example, a string in the list might look like "*abc/def-". Any help would b ...
I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...
Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...
Is there a way to make a jQuery toggle collapsed by default? I've looked at some examples, but none of them seemed to fit my specific setup and I couldn't quite figure them out. Here's the HTML code: <table border="0" width="100%" alig ...
I'm currently facing a challenge while attempting to run a simple Bash Script from within a PHP script. The process involves collecting data from an interactive HTML5 front-end page, transmitting it through ajax to the PHP script, parsing the variable ...
Can anyone provide me with helpful resources or tutorials to create a draggable popup using HTML5 without jQuery? I want to keep it simple and avoid external libraries like jQuery UI. Currently, I have an absolutely positioned div that looks like a popup ...
I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...
I'm looking to extract specific information from aliexpress using scrapy and selenium. However, I've encountered an issue where the HTML code appears differently when inspecting with Chrome compared to viewing the source. It seems that the conte ...
How can I display an error message within a modal after clicking on the update button? In this example, I have included a required attribute on the input field. I would like to modify the error message based on recommendations from Form Validation Best Pr ...
As I delve into learning HTML, I find myself curious about the possibility of combining multiple size types for width. For instance, is it possible to set a width that is both 10px and 3vw? While I understand that this isn't directly supported, I wond ...
I am wondering if it is possible to change the position of a background-image without affecting the text in a link. <a href="#" style="background-image: url('bg.png')">text</a> Can the background-image be moved independently of ...
Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...
Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...
I am looking to achieve a full-screen background image using HTML and CSS. I have configured all the necessary properties for the background image. Here is where my background image is located: [![enter image description here][1]][1] I have attempted to ...
At the moment, I am changing my directives in the following manner. Within my directive: (function(){ 'use strict'; var controller = ['$scope', function ($scope) { }]; angular .module('moduleName' ...