Bootstrap 4 tutorial

Utilities (1): Borders / Clearfix / Close icon

Borders

Border

Additive

.border(-top|-right|-bottom|-left)?

Specifying a direction draws a border only on the specified side.

.border

.border-top

.border-right

.border-bottom

.border-left

Subtractive

.border(-top|-right|-bottom|-left)?-0

Must be used with .border . Specifying a direction draws borders without the specified side.

.border.border-0

.border.border-top-0

.border.border-right-0

.border.border-bottom-0

.border.border-left-0

Border color

Must be used with .border .

.border.border-primary

.border.border-secondary

.border.border-success

.border.border-danger

.border.border-warning

.border.border-info

.border.border-light

.border.border-dark

.border.border-white

Border-radius

img.rounded

img.rounded-top

img.rounded-right

img.rounded-bottom

img.rounded-left

img.rounded-circle

img.rounded-0

Clearfix

For example, consider two floating elements on each sides inside of a block element.

div
- img.float-left
- img.float-right
- p (content height is lower than floatings on both sides)

However, it causes a ploblem as follows.

div only

Text content (height is lower than floatings on both sides).

It is a famous side-effect of CSS float: (left|right) . When a browser calcutates inner height of div , floating items are not considered. As a result, div does not wrap floatings. In this case, using .clearfix resolve this problem.

div.clearfix

Text content (height is lower than floatings on both sides).

Clearfix is a historically famous technique (originally a browser-bug polyfill). But flexbox is a better way for modern browsers. See the example below (no clearfix used).

Text content (height is lower than floatings on both sides).

Close icon

× ( × ) is used for Modal and Alert Close icons.

Example: displays as follows inside button.close .

button.close
- Accessibility attribute aria-label="Close"
- span
  - Accessibility attribute aria-hidden="true"
  - Text ×