Struggling to create an HTML layout that resembles the image provided. Despite using Bootstrap 5, I'm having trouble achieving the desired responsiveness.
Any assistance or guidance would be greatly appreciated!
https://i.sstatic.net/W1Sh0EwX.jpg
I've tried creating two columns, one for the large card and the other for the smaller cards on the right. However, the smaller cards in the right column only end up stacking on top of each other instead of side by side...
While Bootstrap excels at solving many problems, it is not a one-size-fits-all solution.
The Bootstrap grid always consists of 12 columns, but your grid in the image only has 7 columns. It's impossible to fit 7 columns into 12 (1, 2, 3, 4, 6 could).
Therefore, you'll need to create your own grid.
Start by creating a container and designing a 7-column layout. You can achieve this with the following CSS:
.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
Next, allow the first block to span multiple columns and rows by adding this to the first card:
.first-card {
grid-column: span 3;
grid-row: span 2;
}
If you want the smaller boxes to be squares like in your picture, you can simply use aspect-ratio: 1;
/* script specifically for creating the elements */
for (let i = 0; i < 23; i++) {
let card = document.createElement('div');
card.classList.add('card');
card.textContent = i + 1;
container.appendChild(card);
}
#container {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5em;
.card {
background-color: orange;
color: white;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(1) {
grid-column: span 3;
grid-row: span 2;
}
&:not(:nth-child(1)) {
aspect-ratio: 1;
}
}
}<div id="container"></div>This setup can also be made responsive. If needed, provide more specifics on how the grid should adjust on different screen sizes.
Absolutely! Bootstrap is a great tool for creating layouts. Here's an example of the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e938e93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8cdd6cbd6cb">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
<!-- Example Code -->
<div class="container text-center">
<div class="row">
<div class="col-sm-4 mx-1">
</div>
<div class="col mx-1">
<div class="row">
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
</div>
<div class="row">
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
</div>
</div>
</div>
<div class="row">
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
</div>
<div class="row">
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
<div class="col mx-1"></div>
</div>
</div>
Check out the fiddle link for a live demo: https://jsfiddle.net/2hdmwgpL/
Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...
I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...
I recently launched a free hosting site, but I'm encountering an issue where an ad for the site keeps appearing upon loading. I need to find a way to remove the specific rows that contain this ad. Specifically, I want to delete the ****BOLD**** rows, ...
When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...
I have searched through similar questions, but none of them addressed my issue. (they all seemed to be related to typos) This is just for fun. I am trying to create a table using jQuery based on JSON data. The problem is that the appended table rows do no ...
While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...
I am a newcomer to JQuery and need assistance with calling a function on click for an image with a dynamic ID. While I have come across posts about calling a function using the ID, I am struggling to find one that addresses working with a dynamic ID. Is i ...
I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...
Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...
Is there a way to prevent an iFrame object from inheriting CSS properties from the main page? Specifically: I have created an iFrame object in my main class, and I want to adjust the opacity of the main page without affecting the iFrame. However, when I ...
I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...
My goal is to make it so that when a user selects an option from a dropdown menu, the other options are disabled or hidden. For example, if option "1" is selected, options "2", "3", and "4" will be removed: <div class="abc"> <div class="xyz"> ...
Looking for a way to track when a checkbox is checked using Angular This is the current setup: <div class="checkbox" ng-repeat="item in items"> <input type="checkbox" ng-model="test[item.id]" ng-click="getID()" ng-checked="checkAll"/> {{ ...
I have been developing a personal practice website and have successfully integrated a jQuery slide show for showcasing photographs. However, I am facing a challenge in making these slides responsive when the screen size changes. I have gone through numerou ...
I'm attempting to achieve a specific layout using Bootstrap 4, JavaScript, CSS, and HTML. I have not been able to find something similar on Stack Overflow, but I did come across the Bootstrap 4 Cards documentation. However, I am unsure if this is the ...
I've got an excel spreadsheet that contains links to local folders. In order to optimize its compatibility with various devices, I convert it to HTML format. Everything seems to be working smoothly, except for one minor issue - when clicking on the li ...
Recently, I made a change to include target="_blank" in external links by implementing the following code: @hooks.register('after_edit_page') def do_after_page_edit(request, page): if hasattr(page, "body"): soup = BeautifulSoup(page. ...
While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...
My contact form includes the following fields: Name Email Number Department Message The "Department" field is a drop-down selection with seven options: Audio Engineering Graphic Design Music Production Photography Videography Web Development Other I ...
I currently have a Section with four blocks of content. Along the right-hand side of the screen, there are some images (as shown in this example) that I want to position absolutely. However, I am encountering an issue where these images overlap with the te ...