Which of these following are the bootstrap 4 positions

...

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

...

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

...

Sticky top

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.

IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.

...

Position values

Quick positioning classes are available, though they are not responsive.

...
...
...
...
...

Arrange elements

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

Where property is one of:

• top - for the vertical top position
• start - for the horizontal left position [in LTR]
• bottom - for the vertical bottom position
• end - for the horizontal right position [in LTR]

Where position is one of:

• 0 - for 0 edge position
• 50 - for 50% edge position
• 100 - for 100% edge position

[You can add more position values by adding entries to the $position-values Sass map variable.]

Center elements

In addition, you can also center the elements with the transform utility class .translate-middle.

This class applies the transformations translateX[-50%] and translateY[-50%] to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

Examples

Here are some real life examples of these classes:

  Mails +99 unread messages



  Marker 



  Alerts unread messages

You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-values variable.

  
    
  
  1
  2
  3

Sass

Maps

Default position utility values are declared in a Sass map, then used to generate our utilities.

$position-values: [
  0: 0,
  50: 50%,
  100: 100%
];

Utilities API

Position utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "position": [
      property: position,
      values: static relative absolute fixed sticky
    ],
    "top": [
      property: top,
      values: $position-values
    ],
    "bottom": [
      property: bottom,
      values: $position-values
    ],
    "start": [
      property: left,
      class: start,
      values: $position-values
    ],
    "end": [
      property: right,
      class: end,
      values: $position-values
    ],
    "translate-middle": [
      property: transform,
      class: translate-middle,
      values: [
        null: translate[-50%, -50%],
        x: translateX[-50%],
        y: translateY[-50%],
      ]
    ],
    

Which of the following are the positions of bootstrap 4?

What are the four position values available in CSS?

How do I position a div in bootstrap?

WHAT IS positions in HTML?