Bootstrap 4 - floating columns

Question

I am looking for a solution in Bootstrap 4 how to achieve putting 3x columns in one row where due the first column content the other two columns would be displayed parallel to it. Bootstrap 4 uses Flex to handle rows and columns. Please do not provide solutions of splitting Col1 in one container and Col2 and Col3 in another. I am working with different view modes and need the flexibility to adjust the position by the column width. For ex. if Col3 = col-12 should put it bellow Col1 and Col2.

(Just for info, in Bootstrap 3 this feature worked fine since there was floating and % column width). Thank you in advance.

This sounds like Bootstrap 4 is not the right tool for what are going to achieve. If you want to use flexbox based grid system, you will also have to define the row behavior. As of the Bootstrap 4 documentation it is not clear that this can be done using class names only. — feeela, Sep 18 '18 at 12:55
@feeela I was hoping to stay with the original functionality by adding some attributes to achieve my behaviour. Thank you for your help. — Francis, Sep 18 '18 at 13:11
check metafizzy isotope - this sounds like masonary layout for me — Marcel Schmid, Sep 18 '18 at 13:12
What code do you have so far? Please include it in the question. — TylerH, Sep 18 '18 at 13:56
Indeed, floats or **CSS-Grid** would be the optimal methods but the OP would need to clarify what level of support is required. — Paulie_D, Sep 18 '18 at 14:31
Post the code you've attempted so far. Why not just disable the flexbox and use the float classes the Bootstrp 4 provides [as explained here](https://stackoverflow.com/questions/49306652)? — Carol Skelly, Sep 18 '18 at 14:45

Aonghas M · Answer 1 · 2018-09-18T13:08:57.543

You could use some simple CSS to make bootstrap 4 work the way you are familiar with. Here is an example which uses floats to give you the result you want without placing the columns in separate containers: http://jsfiddle.net/nyx6e4bf/1/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-3">
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

.container .row {
  display: block;
}

.row>div:nth-of-type(1) {
  background-color: red;
  float: left;
}

.row>div:nth-of-type(2) {
  background-color: blue;
  float: right;
}

.row>div:nth-of-type(3) {
  background-color: green;
  float: right;
}

Your CSS would have to be more specific than mine unless you wanted to change how Bootstrap worked across the entire site.

I am not sure you can actually achieve what you want without changing the CSS. Flex-box isn't really intended for to solve this issue. You could also look into grid layouts as that could potentially provide a solution.

Thank you for your help. So far I also found only this fallback solution of using block instead of flex and floating (mostly left) of boxes. That will be also my approach if no flex based solution will be found. — Francis, Sep 18 '18 at 13:13
@Francis without wrapping the columns inside another element I am 99% sure you cannot achieve what you want via flexbox. Here is a great guide on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Aonghas M, Sep 18 '18 at 13:15

Bootstrap 4 - floating columns

1 Answers1