Use display:inline-block instead of float

[gthlopez]

This framework has been one of the best I have used , but I have a suggestion , you can use the property "display: inline-block " instead of "float: left | right and clear: both " that does exactly the same , " vertical-align : | middle | top bottom .... " only that the properties of vertical alignment is used , I 'd like to see in a later version . Thank you.

[kkirsche]

I'm not sure I follow how display: inline-block; can be equivalent to floating an object then clearing it. Would you be able to provide an example showing how floating an object is the same as setting display: inline-block?

[gthlopez]

Sorry , I can hardly attach the link. Here it goes: https://jsfiddle.net/prlopez/cqav24pw/

[twbs-lmvtfy]

Hi @gthlopez!

You appear to have posted a live example (https://fiddle.jshell.net/prlopez/cqav24pw/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 45, column 3: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[mdo]

Not a directional change we plan on taking. inline-block has it's own faults, and I believe they've been discussed across other issues here over the last few years.

[gthlopez]

I see , I wonder where you saw problems about using display:inline -block.

[dubcanada]

inline-block treats divs as text. So things like font size and letter spacing effect how far apart a display inline block is from one and another. Also things like different browsers and different OS's play an impact.

You can over come this by doing things like font-size:0px; and stuff like that. But this is more of a hack, then a solution.

Float is what you are suppose to use to put elements beside eachother, as states in the CSS documentation http://www.w3.org/TR/CSS2/visuren.html#float-position

Also order matters when you use inline-block. You can't put a div on the left of another div and float that first div right. You would need to reorder them in HTML. You also couldn't do things like offset without the use of margins, which would effect the flow and make things like fluid width almost impossible.

[cvrebert]

Closing per #17915 (comment)

[stevendesu]

I know it's a year late, but I would like to point out one benefit to inline-block over float that has been causing me a bunch of headaches on a recent project.

I have a list of search results displayed as grid of cards. On a large screen I wish to display rows of 3, and on a small screen I wish to display rows of 2. However the height of the card may change.

Because the number of cards-per-row may change I can't do something cheesey like put style="clear:left;" on every third card, and because the height of the card may change it can sometimes cause cards to stack in strange ways like so: http://kimbryant.net/on-bootstraps-grid-using-display-inline-block-instead-of-floats/

font-size:0px; may seem like a "hack", but when it comes down to it with CSS the point is to make it look how you want, and if it looks good in all browsers then who cares if there's weird font-size stuff going on behind the scenes?

[mdo]

We've dropped nearly all our inline-block, table, and float styles for flexbox in v4. Should give you all the control you want :).

[stevendesu]

@mdo I was about to complain about how flexbox still isn't the silver bullet everyone has been clinging to for two years, but then I took a look at Can I Use FlexBox and it looks like - at long last - it finally is.

Guess my complaints are shot. Now I just need to know a convenient way to use Bootstrap 4's flexbox grid via NPM, if possible. I currently utilize Bootstrap like so:

npm install --save-dev [email protected]

// app.scss
@import '../node_modules/bootstrap/scss/bootstrap'

Which is delightfully simple but doesn't yield the flexibility to change SCSS variables. Is there a bootstrap-flex project or similar way to get what I want, or will I have to just download the whole Bootstrap source and include it in my repo?

[mdo]

doesn't yield the flexibility to change SCSS variables

You can override Sass variables with !default on them by placing your overrides first in your Sass. For example...

// Your override
$body-bg: blue;

// Our variables file
$body-bg: #fff !default;

// Code
body { background-color: blue; }