CODEWITHSUNDEEP
twitter-bootstrapcssflexboxbootstrap-4
systemaddict
systemaddict

Reputation: 363

How to break out of 12 col grid with bootstrap 4 flexbox grid?

When I heard bootstrap 4 was going to employ flexbox for a grid system I was really excited. I thought that this would deploy the fast and useful element sizing that flexbox is known for. However it seems that it just adds some (major) functionality to the current 12 col grid system.

Does Bootstrap 4 make it any easier to relate column widths in a non 12 col layout?

Like how flex boxes can be related to each other simply by specifying the horizontal space to divide using flex-item properties like flex-grow, flex-shrink and flex-basis.

[1:5][-----3:5-----][1:5]

This would be done with a simple flex:3; on the col2 item. But still seems impossible in bootstrap 4? Maybe I'm missing something?

Upvotes: 1

Views: 1859

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362670

Bootstrap 4 has flexbox, and it's still based on a 12-unit grid, however there is also a new auto-layout grid which allows for any number of columns...

Auto-layout columns: http://codeply.com/go/JbGGN4Ok3A

Also, using SASS, you can change the number of grid columns using the $grid-columns variable. In your example, a 10-unit grid would work. Combine this with auto-layout and you can get:

[1:5][-----3:5-----][1:5]

SASS

  $enable-flex:true;
  $grid-columns: 10;
  $grid-gutter-width: 15px;

HTML 

 <div class="row">
         <div class="col-xs">
              1:5
         </div>
         <div class="col-xs-6">
               3:5
         </div>
         <div class="col-xs">
               1:5
         </div>
 </div>

http://codeply.com/view/WG1jllYC2K

Note: You can also use the $grid-gutter-width variable to change the spacing between columns.

UPDATE

Bootstrap 4.0.0: https://www.codeply.com/go/6jTDGBnPIO

As of Bootstrap 4 (alpha 6) the auto-layout .col is now used for flex-grow so that you can create half-unit column layouts. The 2.5--7--2.5 layout is mathematically very close to your 1.5--3.5--1.5 (10-unit) so this may be another option instead of the custom SASS 10 unit grid. http://www.codeply.com/go/kBqRVNPE6E

Upvotes: 2

Related Questions