The Bootstrap grid system consists of 12 columns in total.
I am looking to utilize all 12 columns on the page.
However, my goal is to have the first 6 columns on the left side be half the width (50%) of the columns on the right side.
This means that the right 6 columns will always be twice as wide as the ones on the left.
I want this width ratio to remain consistent even if the page or window size is changed.
Can someone please guide me on how to achieve this? Thank you.
This particular task does not involve using a boostrap grid system. It requires dividing into 12 equal width parts, not 12 blocks of unequal width. To accomplish this, you should utilize display: grid;.
The code snippet
grid-template-columns: repeat(6, 2fr) repeat(6, 1fr);2fr followed by 6 occurrences of 1fr. The unit fr is a relative measure within the grid layout, dividing the available space accordingly. In this case, 2fr is twice the size of 1fr. The total row composition is 2fr 2fr 2fr 2fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr 1frFor more information on CSS Grid, you can refer to the following links:
.grid-row {
display: grid;
grid-template-columns: repeat(6, 2fr) repeat(6, 1fr);
grid-auto-rows: auto;
grid-row-gap: .5rem;
grid-column-gap: .5rem;
}
.grid-col {
background: #000;
min-height: 50px;
}
@media (max-width: 500px) {
.grid-row {
grid-template-columns: repeat(3, 2fr) repeat(3, 1fr);
}
}<div class="grid-row">
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
</div>If you need columns that are 1.5 times wider instead of twice as wide, you can update the code to
grid-template-columns: repeat(6, 3fr) repeat(6, 2fr);.grid-row {
display: grid;
grid-template-columns: repeat(6, 3fr) repeat(6, 2fr);
grid-auto-rows: auto;
grid-row-gap: .5rem;
grid-column-gap: .5rem;
}
.grid-col {
background: #000;
min-height: 50px;
}
@media (max-width: 500px) {
.grid-row {
grid-template-columns: repeat(3, 3fr) repeat(3, 2fr);
}
}<div class="grid-row">
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
<div class="grid-col"></div>
</div>I am looking to modify the color of the active page, Here is the HTML code snippet: <html> <head> <title>John Doe - Portfolio</title> <link rel="stylesheet" href="custom-style.css"> <link rel=" ...
Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...
I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul. Here is the HTML code: <ul class="menu"> ...
I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...
I am inspired by the sleek design of Apple's website and want to replicate some of its features in my project (best viewed on FF, Chrome, Safari): Initially, the page appears empty except for the header - but the final height of the page is already ...
I am currently working on designing a navigation bar featuring a dropdown menu. I envision HOME, FIXTURES, RESULTS, LEADERBOARD all appearing on the same line. Specifically, I would like UPCOMING WEEK, MONTHS to be the dropdown children of FIXTURES, and G ...
I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...
I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...
There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...
On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX: <div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> We ...
I have a quick question. I am currently dealing with data that is constantly changing and displayed from a selected item in a table. To monitor for overflow, I have implemented the following code: if (event.target.offsetWidth < event.target.scrollW ...
I have a collection of images that I want to arrange in a tiled layout, similar to the one shown in this image. These images consist of 3 photos with identical width and height, except for one which is larger and should occupy double the space compared to ...
I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...
Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...
After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...
I am looking to create a drop-down menu with the following structure: | Heading ---------------- action | Item action | Item action | Item action | Item The action could represent "Change" and Item could be something like "Users". To maintain ...
When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...
I'm curious as to why the margin-bottom of .content-b isn't affecting the height of the .container. .container { background: grey; } .content-a, .content-b { height: 100px; border: 1px solid red; margin-bottom: 100px; } <div class= ...
Is there a way to change the label color in my view when the input is disabled using Typescript or CSS? This is the interface I am working with: interface image Here is the code snippet: <tr> <td className="name">Critère d&a ...
Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...