Tag / css

by Jamston

Align items vertically in Bootstrap 4.5

I’m sick of forgetting how to do the simplest things using bootstrap so here’s a bit of a cheat sheet for reference.

Align items in a “col” vertically center (applied to an individual col):-

<div class="row">
 <div class="col d-flex align-items-center justify-content-center">
    <p>Vertically centered content</p>
  </div>
</div>
  • d-flex = makes the column a flex container.
  • align-items-center = vertically centers items.
  • justify-content-center = horizontally centers items (optional).

Align items vertically center in all columns across the whole “row”


<div class="row align-items-center">
  <div class="col">
    <div>Column 1</div>
  </div>
  <div class="col">
    <div>Column 2</div>
  </div>
  <div class="col">
    <div>Column 3</div>
  </div>
</div>
  • .row in Bootstrap is already a flex container.
  • Adding align-items-center to the row applies align-items: center; to all its children (the columns).
  • This vertically centers everything inside each column relative to the row’s height.
  • Make sure the row has a defined height (e.g., via CSS or its parent container), otherwise vertical centering won’t be visible.

Switch the order of columns based on screen size


<div class="row">
  <div class="col order-2 order-md-1">Column 1</div>
  <div class="col order-1 order-md-2">Column 2</div>
  <div class="col order-3">Column 3</div>
</div>
  • On extra small screens (default), Column 1 will appear second, Column 2 will appear first.
  • On medium screens and up, Column 1 will appear first, Column 2 will appear second.
  • Column 3 stays third.
by Jamston

Target IE versions with CSS “Hacks”

Found an article today that I found useful while trying to sort a little issue I had with the lack of CSS3 support in older versions of Internet Explorer.

Target IE versions with CSS “Hacks”

Here are the hacks that let you target specific IE versions.

Use “\9” to target IE8 and below.
Use “*” to target IE7 and below.
Use “_” to target IE6.

Example:

body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

If you don’t like using “Hacks” then you can explicitly target IE versions without hacks using HTML and CSS

Use this approach if you don’t want hacks in your CSS. Add a browser-unique class to the <html>element so you can select based on browser later.

Example

<!doctype html>
<!–[if IE]><![endif]–>
<!–[if lt IE 7 ]> <html lang=”en” class=”no-js ie6″> <![endif]–>
<!–[if IE 8 ]> <html lang=”en” class=”no-js ie8″> <![endif]–>
<!–[if IE 9 ]> <html lang=”en” class=”no-js ie9″> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><html lang=”en” class=”no-js”><!–<![endif]–>
<head></head>
<body></body>
</html>
Then in your CSS you can very strictly access your target browser.

Example

.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}

Original article here… http://stackoverflow.com/questions/814219/how-to-target-ie7-ie8-with-css-valid-code