Category: CSS

Sometimes, we want to make Twitter Bootstrap tooltips have multiple lines with CSS.

In this article, we’ll look at how to make Twitter Bootstrap tooltips have multiple lines with CSS.

How to make Twitter Bootstrap tooltips have multiple lines with CSS?

To make Twitter Bootstrap tooltips have multiple lines with CSS, we can set the white-space style to pre-wrap.

For instance, we write

.tooltip-inner {
  white-space: pre-wrap;
}

to style the tooltip with white-space set to pre-wrap.

Conclusion

To make Twitter Bootstrap tooltips have multiple lines with CSS, we can set the white-space style to pre-wrap.

Sometimes, we want to position element at center of screen with CSS.

In this article, we’ll look at how to position element at center of screen with CSS.

How to position element at center of screen with CSS?

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.

For instance, we write

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

to style the div with the popup class with the positioning styles.

We set position to fixed to make the div float above other items.

Then we set the top and left properties to 50% to make it move 50% from the top and left side of the screen.

And then we use the transform style to translate the div to the center of the screen.

Conclusion

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.

Sometimes, we want to use images like checkboxes with CSS.

In this article, we’ll look at how to use images like checkboxes with CSS.

How to use images like checkboxes with CSS?

To use images like checkboxes with CSS, we can add a label and an input and style them.

For instance, we write

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="https://picsum.photos/200/200" /></label>

to add a checkbox with a label that has an img element in it.

Then we set the background image of the label with CSS by writing

label::before {
  background-image: url(../path/to/unchecked.png);
}

:checked + label::before {
  background-image: url(../path/to/checked.png);
}

We set the background image to replace the checkbox with the image with

label::before {
  background-image: url(../path/to/unchecked.png);
}

And the we set the image that shows when the checkbox is checked instead of the checkbox with

:checked + label::before {
  background-image: url(../path/to/checked.png);
}

Conclusion

To use images like checkboxes with CSS, we can add a label and an input and style them.

To disable div element and everything inside with CSS, we set the pointer-events CSS property of the div to none.

For instance, we write

div {
  pointer-events: none;
}

to disable pointer events on the div with pointer-events set to none with CSS.

Sometimes, we want to vertically centering Bootstrap modal window.

In this article, we’ll look at how to vertically centering Bootstrap modal window.

How to vertically centering Bootstrap modal window?

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.

For instance, we write

<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  Launch demo modal
</button>

<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

to add the modal-dialog-centered class to the div that has the modal-dialog class to vertically center the modal.

Conclusion

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.