Bootstrap - Position

This chapter discusses about the .position utility classes for quick configuration of the position of an element.

Position values

The .position classes are available for quick positioning, but they are not responsive in nature.

The various values for position class are as follows:

  • .position-static

  • .position-relative

  • .position-absolute

  • .position-fixed

  • .position-sticky

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="m-2">
	  <h4 class="mb-4">Position values</h4>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: static states that the top, right,
		  bottom, and left properties will be the same no matter
		  <p class="position-static bg-info top-50 start-50 text-light">position: static</p>
		  This part is out of the paragraph.
	  </div>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: relative sets its position to be relative
		  with respect to the elements on top of it
		  <p class="position-relative bg-success top-50	start-50 text-light w-50">
			position: relative;
		  </p>
		  This means that the top, right, bottom, and
		  left properties will
		  affect the position of the Paragraph.
	  </div>
	  <div class="container mt-4 bg-light border border-dark">
		  Position: absolute sets its position relative to
		  the closest parent and it set its position absolute
		  with that.
		  <p class="position-absolute bg-warning bottom-0 end-50 text-light">
			position: absolute;
		  </p>
		  This means that the top, right, bottom, and left
		  properties will get adjusted with respect to the
		  nearest ancestor and then the position is set.
	  </div>
  </body>
</html>

Arrange elements

Elements can be arranged easily with the edge positioning utility classes.

The format for arranging the elements is {property}-{position}.

where property can hold following values:

property description
top vertical top position
start horizontal left position (LTR)
bottom vertical bottom position
end horizontal right position (LTR)

where position can hold following values:

position description
0 0 edge position
50 50% edge position
100 100% edge position

Note: More position values can be added by making entries to the $position-values Sass map variable.

Let us see an example of arrangement of elements using the .position-* class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="container p-3 m-5">
      <div class="position-absolute top-0 start-0 mb-2">
        <button type="button" class="btn btn-primary">top-0 start-0</button>
      </div>
      <div class="position-absolute top-50 start-50 mb-2">
        <button type="button" class="btn btn-secondary">top-50 start-50</button>
      </div>
      <div class="position-absolute top-0 end-0 mb-2">
        <button type="button" class="btn btn-success">top-0 end-0</button>
      </div>    
      <div class="position-absolute bottom-0 start-0 mb-2">
        <button type="button" class="btn btn-warning">bottom-0 start-0</button>
      </div>
      <div class="position-absolute bottom-50 end-50 mb-2">
        <button type="button" class="btn btn-danger">bottom-50 end-50</button>
      </div>
      <div class="position-absolute bottom-0 end-0 mb-2">
        <button type="button" class="btn btn-info">bottom-0 end-0</button>
      </div>
    </div>
  </body>
</html>

Center elements

  • Using the transform utility class .translate-middle, you can arrange the elements in the center.

  • The transform class applies the transformations translateX(-50%) and translateY(-50%) to an element.

  • This element then combines with edge positioning utilities and thus centers the element.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      span {
          border: 2px solid rgb(26, 58, 241);
          padding: 30px;
          background:#1ae3f1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="position-absolute top-0 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-100 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-100 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-0 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-100 start-100 translate-middle">
        <span></span>
      </div>
    </div>
  </body>  
</html>

Use .translate-middle-x or .translate-middle-y classes, in order to position the elements only in horizontal or vertical direction.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      span {
          border: 2px solid rgb(26, 58, 241);
          padding: 30px;
          background:#dd1c8c;
      }
    </style>
  </head>
  <body>
    <div class="position-static">
      <div class="position-absolute top-0 start-0">
        <span></span>
      </div>
      <div class="position-absolute top-0 start-50 translate-middle-x">
        <span></span>
      </div>
      <div class="position-absolute top-0 end-0">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-0 translate-middle-y">
        <span></span>
      </div>
      <div class="position-absolute top-50 start-50 translate-middle">
        <span></span>
      </div>
      <div class="position-absolute top-50 end-0 translate-middle-y">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 start-0">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 start-50 translate-middle-x">
        <span></span>
      </div>
      <div class="position-absolute bottom-0 end-0">
        <span></span>
      </div>
    </div>
  </body>  
</html>

Few more examples

Some more examples are shown below, where .position class is used along with other utility classes provided by Bootstrap:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="d-flex p-5 gap-5">
    <button type="button" class="btn btn-success position-relative">
      Notifications<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"><span class="visually-hidden">unread messages</span></span>
    </button>
    <button type="button" class="btn btn-primary position-relative">
      Inbox
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        99+
        <span class="visually-hidden">unread messages</span>
      </span>
    </button>
    <button type="button" class="btn btn-warning position-relative">
      Messages <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
    </button>
    </div>
  </body>
</html>

These classes can be used along with other Bootstrap components to create new ones.

Let us see an example where progress-bar is used with .position utility class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Position</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="mb-5 p-3">
    <h2 class="text-center">Position</h2>    
    <div>
        <div class="position-relative m-4">
            <div class="progress" >
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-success rounded-pill">1</button>
            <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-warning rounded-pill">2</button>
            <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-info rounded-pill">3</button>
            <button type="button" class="position-absolute top-50 end-50 translate-middle btn btn-sm btn-danger rounded-pill">4</button>
        </div>
    </div>      
  </body>
</html>
Advertisements