Bootstrap class: .close

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Preview

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .close in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _alert.scss:33 */
.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: $alert-padding-y $alert-padding-x;
  color: inherit;
}

/* _modal.scss:108 */
.close {
  padding: $modal-header-padding;
  // auto on the left force icon to the right even when there is no .modal-title
  margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
}

Uses variables

/* _alert.scss:33 */
$alert-padding-y
$alert-padding-x

/* _modal.scss:108 */
$modal-header-padding
$modal-header-padding
$modal-header-padding
$modal-header-padding