HyperAccess Bootstrap 4 Utilities functions

Spacing

Margins and Padding

The margin (m) property adds spacing between the elements
Padding (p) between the content and container boundary.

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Vertical Align

baseline top middle bottom text-top text-bottom

Block-level and In-line Elements

Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width: most html elements
In-line Elements An inline element does not start on a new line and only takes up as much width as necessary. include span, button small etc.

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.('text-muted')

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Borders

Clearfix

fffffffffff

Not clearfix

fffffffffff

Bootstrap 4 Flexbox

Bootstrap 4 Flexbox with Auto-Margins Tricks

Item 1
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus ut lectus interdum. Congue conubia ornare mollis scelerisque. Arcu sapien ac sodales euismod tempus vestibulum ullamcorper ligula
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus ut lectus interdum. Congue conubia ornare mollis scelerisque. Arcu sapien ac sodales euismod tempus vestibulum ullamcorper ligula
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus ut lectus interdum. Congue conubia ornare mollis scelerisque. Arcu sapien ac sodales euismod tempus vestibulum ullamcorper ligula
Lorem ipsum dolor sit amet consectetuer adipiscing elit. Nostra mus vitae sapien tincidunt sit convallis eni ornare hac tellus ut

Bootstrap 4 Flexbox with Auto-Margins Tricks

Item 1
Item 2
Item 3
....
Item N
Item 1
Item 2
Item N

Fix