Creating a responsive layout in Bootstrap 4 with three columns in a row, each with varying widths that maintain their positioning and don't stack when the

I've been searching for an answer to this question but couldn't find it. I want to arrange three columns in a row, with the middle column taking up 50% of the space and the left and right columns each taking up 25%. I don't want them to stack on top of each other like Bootstrap does by default.

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

Can Bootstrap's grid system achieve this layout, or do I need to implement custom styling?

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

To achieve dynamic column resizing, you can utilize the auto-layout cols feature in combination with the predefined grid system.

The auto-layout functionality for flexbox grid columns allows you to specify the width of one column while having the adjacent columns adjust their sizes accordingly.

Check out this example on Codeply

col-6 corresponds to 50% width.

<div class="row">
    <div class="col">
      25%
    </div>
    <div class="col-6">
      50%
    </div>
    <div class="col">
      25%
    </div>
</div>

It's important to note that these col and col-* classes do not stack.

The responsive stacking of columns by breakpoints is as follows:

col-sm and col-sm-* - at 576px
col-md and col-md-* - at 768px
col-lg and col-lg-* - at 992px
col-xl and col-xl-* - at 1200px

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

Step-by-step guide for implementing LoadGo animation with HTML

I'm in the process of loading my logo on my website's homepage. I found a LoadGo animation that I want to use, which can be downloaded Here Currently, the logo is set to load when a button is clicked. However, I would like it to load automatical ...

jqueryhtmlcss

Error: "$$" not defined in this context

I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came ...

javascriptjquerycsssvg

Exploring with jQuery to discover the contents located at a specific X/Y position?

Hi there, I need help with the following code snippet: function getLocation() { var positionLeft = $('#element').position().left; var positionTop = $('#element').position().top; } I also have this line of code: $('ul#con ...

javascriptjqueryhtmlcss

The way Firefox interprets em values is incorrect

Currently, I am working on an adaptive website where I have used em values for everything. However, I am facing discrepancies between Chrome and Firefox when it comes to interpreting em values. The website can be found at dev.morodeer.ru/stroymoidom and ...

cssfirefox

Modify the color of a sub division's background using CSS when hovering over

As I work on this Fiddle, my goal is to change the background of each div section individually when moused over. However, currently, hovering over one section triggers the background change for all sections. Is there a way to ensure that only the specific ...

htmlcss

Javascript retrieve the style of an element in every possible state

I am interested in retrieving the line height of an element; it's a simple task. Here is a method that I know works: console.log(document.getElementById("myDiv").style.lineHeight); console.log($("#myDiv").css('lineHeight')) ...

javascripthtmlcss

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

There have been a lot of questions about Tic-Tac-Toe javascript, but my issue is unique. My code works fine, but it doesn't declare a winner or a tie game until the entire board is filled. I suspect that my if statements are causing problems and can&a ...

javascripthtmlcssdom

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

javascriptjqueryhtmlcssajax

Positioning CSS icons beside text

I'm having trouble aligning a close button I created in CSS with regular text. Although the containing span element seems to align with the adjacent text, it doesn't align properly with the child divs. <a class="event-filter button" href="#"& ...

htmlcss

The problem with -webkit-center in HTML

I have encountered an issue with some code that I wrote. When utilizing -webkit-center and entering text into a textbox, all the items shift to the right. I have attempted other -webkit alignment settings without any problems, only -webkit-center seems to ...

htmlcsswebkit

Styling elements using the nth-child selector in JavaScript

I am trying to apply a CSS class based on the combined height of the 2nd and 3rd child elements. For example, if the height of the 2nd child plus the height of the 3rd child equals a certain value, I want to add a specific class. Here is my JavaScript cod ...

javascriptcss

Disabling the Bootstrap tooltip feature is a quick and easy process

Is there a way to turn off bootstrap tooltip on my website? I activated it with the code below: function activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { new bootstrap.Tooltip(t); } ...

javascripttwitter-bootstrapbootstrap-5

How can I stack two images on top of each other using z-index?

Within a div element, I have an image: <div class="full-width"> <img src="images/products/product1.jpg" /> </div> I am looking to introduce another image called frame.png, but not as a background image! <img src="images/products ...

htmlcssz-index

The dimensions of the box are not predetermined by the size of the photo

I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...

javascripthtmlcssreactjsgrid

Is there a glitch in Safari's CSS involving max-height?

Currently, I am in the process of developing a popup for a registration form. The CSS rules have been configured accordingly and after testing on various browsers, it has come to my attention that Safari is displaying an additional white space between elem ...

csssafari

Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing. <div c ...

cssreactjstwitter-bootstrapbootstrap-4

A guide on detecting overflow in a React functional component

I am in search of a way to determine if a div contains overflowing text and display a "show more" link if it does. While researching, I came across an insightful Stack Overflow answer on checking for overflow in a div. The answer suggests implementing a fu ...

javascriptcssreactjsreact-forwardref

What is the best way to left-align numbers in a table?

https://jsfiddle.net/6a7d2snj/ I need help aligning numbers to the left within a table column: 50 5 -40 -4 How can I achieve this? Using style="align:right" aligns the numbers on the right, but my goal is to have them aligned to the left! ...

htmlcss

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

javascriptcssangulartypescriptbootstrap-4

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is ...

htmlcss