Bootstrap4 provides some utility classes that allow us to achieve desired effects without writing CSS code.
* * *
## Borders
Use the `border` class to add or remove borders:
## Example
[Try it »](#)
* * *
## Border Colors
Bootstrap4 provides some classes to set border colors:
## Example
[Try it »](#)
* * *
## Rounded Corners
Use the `rounded` class to add rounded corners to borders:
## Example
[Try it »](#)
* * *
## Floats
The `.float-right` class is used to set an element to float right, `.float-left` sets an element to float left, and the `.clearfix` class is used to clear floats:
## Example
Float leftFloat right
[Try it »](#)
* * *
## Responsive Floats
We can set the float direction (`.float-*-left|right` - where `*` is `sm`, `md`, `lg`, or `xl`) to be dependent on the screen size:
## Example
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
No float
[Try it »](#)
* * *
## Center Alignment
Use the `.mx-auto` class to set center alignment:
## Example
Centered
[Try it »](#)
* * *
## Width
Use the `w-*` classes (`.w-25`, `.w-50`, `.w-75`, `.w-100`, `.mw-100`) on an element to set its width:
## Example
Width 25%
Width 50%
Width 75%
Width 100%
Max width 100%
[Try it »](#)
* * *
## Height
Use the `h-*` classes (`.h-25`, `.h-50`, `.h-75`, `.h-100`, `.mh-100`) on an element to set its height:
## Example
Height 25%
Height 50%
Height 75%
Height 100%
Max height 100%
[Try it »](#)
* * *
## Spacing
The spacing syntax is as follows:
`{property}{sides}-{size}` // For xs (=576px), md (>=768px), lg (>=992px), xl (>=1200px)
> Breakpoints refer to screen widths: xs (=576px), md (>=768px), lg (>=992px), xl (>=1200px).
`property` stands for the property, which includes:
* `m` - for setting `margin`
* `p` - for setting `padding`
`sides` mainly refers to the direction:
* `t` - for setting `margin-top` or `padding-top`
* `b` - for setting `margin-bottom` or `padding-bottom`
* `l` - for setting `margin-left` or `padding-left`
* `r` - for setting `margin-right` or `padding-right`
* `x` - for setting `*-left` and `*-right`
* `y` - for setting `*-top` and `*-bottom`
* blank - for setting `margin` or `padding` on all four sides of the element
`size` refers to the size of the spacing:
* `0` - sets `margin` or `padding` to `0`
* `1` - sets `margin` or `padding` to `$spacer * .25`
* `2` - sets `margin` or `padding` to `$spacer * .5`
* `3` - sets `margin` or `padding` to `$spacer`
* `4` - sets `margin` or `padding` to `$spacer * 1.5`
* `5` - sets `margin` or `padding` to `$spacer * 3`
* `auto` - sets `margin` to auto
**Margin** can be set to a negative value by adding the letter **"n"** before the number:
* `n1` - sets margin to -.25rem (or -4px if font-size is 16px)
* `n2` - sets margin to -.5rem (or -8px if font-size is 16px)
* `n3` - sets margin to -1rem (or -16px if font-size is 16px)
* `n4` - sets margin to -1.5rem (or -24px if font-size is 16px)
* `n5` - sets margin to -3rem (or -48px if font-size is 16px)
Here is a look at the source code for some spacing utilities:
```css
.mt-0 { margin-top: 0 !important; }
.ml-1 { margin-left: ($spacer * .25) !important; }
.px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; }
.p-3 { padding: $spacer !important; }
## Example
Element centered
[Try it »](#)
### More Examples
`.m-# / m-*-#` Sets margin on all sides (#)
`.mt-# / mt-*-#` margin top (#)
`.mb-# / mb-*-#` margin bottom (#)
`.ml-# / ml-*-#` margin left (#)
`.mr-# / mr-*-#` margin right (#)
`.mx-# / mx-*-#` margin left and right (#)
`.my-# / my-*-#` margin top and bottom (#)
`.p-# / p-*-#` Sets padding on all sides (#)
`.pt-# / pt-*-#` padding top (#)
`.pb-# / pb-*-#` padding bottom (#)
`.pl-# / pl-*-#` padding left (#)
`.pr-# / pr-*-#` padding right (#)
`.py-# / py-*-#` padding top and bottom (#)
`.px-# / px-*-#` padding left and right (#)
YouTip