Menu
I'm currently using Bootstrap 3.3.7 and because my site is huge it isn't easy to migrate to v4. Nevertheless I'd like to use the new Auto-Layout-columns (Variable width content) feature (see screenshot below).
Has anybody an idea for a workaround?
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-xs-push-3 col-md-3">Fixed 250px</div>
<div class="col-xs-6 col-xs-pull-3 col-md-3">Auto</div>
<div class="col-xs-6 col-md-3">Auto</div>
<div class="col-xs-6 col-md-3">Auto</div>
</div>
</div>
559
The Bootstrap grid allows 12 columns with 30 px wide gutters by default, but these numbers can be adjusted. Just check the Grid System block on the Customize page. The @grid-columns field allows to set a different number of columns, and the @grid-gutter-width field lets you change the gutter width.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
offset-md-3 which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. . offset classes always shifts its content to the right.
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
You could add the flexbox CSS that makes the auto-layout columns work in Bootstrap 4...
CSS:
.d-flex {
display:flex;
}
.d-flex>div {
float: none;
}
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: none;
}
Usage:
<div class="container">
<div class="row d-flex">
<div class="col-sm-3 bg-success">col-sm-3</div>
<div class="col-auto">col-auto</div>
<div class="col-sm-9 bg-success">col-sm-3</div>
</div>
</div>
Demo:
https://www.codeply.com/go/cTTtpuItaM
Related: Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
