The Bootstrap framework provides us with a series of classes that allows us to change the position of an element. It provides us with five classes that are common in function with the CSS position property. In addition, it provides three additional classes for controlling the position of an element.
Common Classes:
- position-static: It works the same as the position: static; the property of the CSS.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
left: 10px;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the entire div responsive -->
<div class="container">
<h1 class="text-center">
GeeksForGeeks
</h1>
<div class="parent">
<p class="position-static">
position-static
</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity
="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
- position-relative: It works the same as the position: relative; the property of the CSS.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
left: 10px;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the entire
div responsive -->
<div class="container">
<h1 class="text-center">
GeeksForGeeks
</h1>
<div class="parent">
<p class="position-relative">
position-relative
</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
- position-absolute: It works the same as the position: absolute; the property of the CSS.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
right: 10px;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent position-relative">
<p class="position-absolute">
position-absolute
</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
- position-fixed: It works the same as the position: fixed; the property of the CSS.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
right: 10px;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent">
<p class="position-fixed">position-fixed</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
- position-sticky: It works the same as the position: sticky; the property of the CSS.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
right: 10px;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent">
<p class="position-sticky">
position-sticky
</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
Fixed Top
- fixed-top: It makes the element fix at the top of the viewport, from edge to edge.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center {
color: green;
margin-top: 30px;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
text-align: center;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent">
<p class="fixed-top">fixed-top</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
Fixed Bottom
- fixed-bottom: It makes the element fixed at the bottom of the viewport, from edge to edge.
Example:
html
<!DOCTYPE html><html>
<head>
<!-- Custom CSS -->
<style>
h1.text-center{
color: green;
margin-top: 30px;
}
div.parent{
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p{
text-align: center;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
/* Overriding default margin-bottom
property of bootstrap, to make it
stick perfectly to the bottom */
margin-bottom: 1px !important;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent">
<p class="fixed-bottom">fixed-bottom</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
Sticky Top
- sticky-top: It makes the element fix at the top of the viewport, from edge to edge, after scrolling past the element. Otherwise, it is positioned as static.
Example:
html
<!DOCTYPE html><html>
<head>
<style>
h1.text-center {
color: green;
margin-top: 30px;
}
div.parent {
height: 100px;
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
p {
top: 10px;
left: 10px;
text-align: center;
padding: 2px;
border: 1px solid blue;
display: inline-block;
background: #E3F2FD;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Bootstrap Text Utilities</title>
</head>
<body>
<!-- Bootstrap class for making the
entire div responsive -->
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<div class="parent">
<p class="sticky-top">sticky-top</p>
</div>
</div>
<!-- Link JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Article Tags :
Recommended Articles