Category: HTML

Sometimes, we want to make a placeholder for a select box with HTML.

In this article, we’ll look at how to make a placeholder for a select box with HTML.

How to make a placeholder for a select box with HTML?

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.

For instance, we write

<label
  >Option name
  <select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
  </select>
</label>

to add a disabled option as the first option.

We make it selected by default with the selected attribute.

Conclusion

To make a placeholder for a select box with HTML, we add a disabled option into the drop down.

Sometimes, we want to make Bootstrap columns all the same height with HTML.

In this article, we’ll look at how to make Bootstrap columns all the same height with HTML.

How to make Bootstrap columns all the same height with HTML?

To make Bootstrap columns all the same height with HTML, we use the flexbox classes.

For instance, we write

<div class="container">
  <div class="row">
    <div class="col-md-4" style="background-color: red">some content</div>
    <div class="col-md-4" style="background-color: yellow">
      catz
      <img width="100" height="100" src="https://placekitten.com/100/100/" />
    </div>
    <div class="col-md-4" style="background-color: green">
      some more content
    </div>
  </div>
</div>

to add the container class to make the outer div a flex container.

Then we add the row and column classes to make the inner divs rows and columns with the same height.

Conclusion

To make Bootstrap columns all the same height with HTML, we use the flexbox classes.

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.

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.

To add a tooltip to a div with HTML, we set the title attribute.

For instance, we write

<div title="This is my tooltip">tooltip</div>

to add a div.

Then we set its title attribute to the tooltip text.

We see the tooltip when we hover over the div.