Categories
HTML

How to add text-align class for inside a table with Bootstrap and HTML?

Labrador retriever puppy walking on green grass

To add text-align class for inside a table with Bootstrap and HTML, we use the classes starting with text-.

For instance, we write

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">
  Left aligned text on viewports sized SM (small) or wider.
</p>
<p class="text-md-left">
  Left aligned text on viewports sized MD (medium) or wider.
</p>
<p class="text-lg-left">
  Left aligned text on viewports sized LG (large) or wider.
</p>
<p class="text-xl-left">
  Left aligned text on viewports sized XL (extra-large) or wider.
</p>

to add the text- classes to align left with left.

We center align with center.

And we center align with right.

xs, sm, lg, and xl are breakpoints.

Categories
CSS

How to make Flexbox children 100% height of their parent with CSS?

Labrador retriever puppy walking on green grass

To make Flexbox children 100% height of their parent with CSS. we set the align-items property.

For instance, we write

.flex-2 {
  display: flex;
  align-items: stretch;
}

to make the element with class flex-2 a flex container with display: flex;.

We make the elements inside stretch to fit the height of the parent with align-items: stretch;.

Categories
CSS

How to remove the border highlight on an input text element with CSS?

Labrador retriever puppy walking on green grass

To remove the border highlight on an input text element with CSS, we set the outline property.

For instance, we write

input {
  outline: none;
}

to set outline to none on the input elements to remove their border.

Categories
CSS

How to target only Firefox with CSS?

Labrador retriever puppy walking on green grass

To target only Firefox with CSS, we use @supports.

For instance, we write

@supports (-moz-appearance: none) {
  h1 {
    color: red;
  }
}

to target Firefox with @supports (-moz-appearance: none).

And we set h1 elements to have color red when in Firefox only.

Categories
HTML

How to fix stylesheet not loaded because of MIME-type with HTML?

Labrador retriever puppy walking on green grass

To fix stylesheet not loaded because of MIME-type with HTML, we should make sure the link element has the right attributes.

For instance, we write

<link rel="stylesheet" src="dist/photoswipe.css" />

to add a link element with the rel attribute set toi stylesheet.

And we set the stylesheet URL as the value of the src attribute.