Applies to Bootstrap 3 only. Ignoring the letters (xs, sm, md, lg) for now, I’ll start with just the numbers… the numbers (1-12) represent a portion of the total width of any div all divs are divided into 12 columns so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 … Read more
Found an alternative at Child elements with margins within DIVs You can also add: .parent { overflow: auto; } or: .parent { overflow: hidden; } This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse: .parent { padding-top: 1px; margin-top: -1px; … Read more
display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.1 There is absolutely no … Read more
The problem that I found with Boushley’s answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of ‘solutions’ I found a tutorial (now link is dead) … Read more
Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* … Read more
You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn’t work in IE8 or below: :not(:last-child) { /* styles */ }
The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS. That’s why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, … Read more
The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS. That’s why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, … Read more
Do this: box-shadow: 0 4px 2px -2px gray; It’s actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto. From the spec: If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, … Read more