For those who might be interested in what Bootstrap v4 has in store, the biggest thing for me is Flexbox.
It's kind of like making a table but like a "real" responsive table. Meaning you are able to vertically align any element type (image/div/text) inside the parent element that has Flexbox applied to it. Like a table each child (cell) is equal height to it's sibling(s). Can be easily turned from row of elements to a column and can change it's display order differently then what is in the HTML mark-up.
Here is a good read on what Flexbox is and how it works etc... https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am using is in a few places on my current project. Have used it in a few places on previous site builds.
Looking forward to Bootstrap Studio to support it when http://getbootstrap.com/ releases it.
I'm bringing this up because I needed to make my button group to work like as if I had added the class btn-group-justified, but I didn't want it to be this way on all screen sizes just small mobile. So I tried to make CSS similar to that class but it wasn't working out right and the way I wanted. So I knew I could do this with Flexbox. So I did, and thought I'd share this little snippet.
My button group contains 5 buttons with icon and wording. However, I have the wording hidden when on mobile screens which leaves the button group smaller then the width of the screen and with wording it doesn't fit all on one line.
So with just adding this bit of CSS fixes the button group to expand the width of the mobile device with equal buttons sizes. This code includes prefixes to support down to IE10, IE9 and less does not support it.
@media (max-width:767px) {
.btn-group{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
}
}
@media (max-width:767px) {
.btn-group > .btn{
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
}
If you just want to support at least IE11/Edge then it's narrowed down to this. Latest Chrome/Firefox/Safari all support this.
@media (max-width:767px) {
.btn-group{
display:flex;
}
}
@media (max-width:767px) {
.btn-group > .btn{
flex:1;
}
}
Flexbox coding overrides float and several other properties, so if a browser doesn't support Flexbox it will still get the Bootstrap CSS it does support and in my example in IE9 the button group would fall back to normal display i.e. not filling up the screen width.
I hope someone might find this use full.
Saj