Description:
- In Bootstrap 4, H2 tag can be added beneath or below H1 tag. Whereas in case of using float the H2 tag can’t be added beneath or below H1 tag because the H2 tag will move to beneath end of H1 tag due to bootstrap 4 CSS properties.
- To eradicate this issue we can move H2 beneath H1 on the float by wrapping both tags with an element having flex properties or by individually wrapping each tags with an element having class clearfix.
Example 1: The following examples illustrate how to move H2 beneath H1 only with floats.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
"> <script src="
"></script>
<script src="
"></script>
<script src="
"></script>
</head>
<body>
<div class="container-fluid p-5">
<h1 class="text-success font-weight-bold text-center">
GeeksforGeeks</h1>
<span class="font-weight-bolder">
H1 & H2 Without float
</span>
<div class="border bg-primary text-white">
<h1 class="">H1 Without Float left</h1>
<h2 class="">H2 Without Float left</h2>
</div>
<span class="font-weight-bolder">With float</span>
<div class="border bg-danger clearfix text-white">
<h1 class="float-left ">H1 Float left</h1>
<br>
<h2 class="float-left ">H2 Float left</h2>
</div>
<span class="font-weight-bolder">
Using clearfix with float
</span>
<div class="border bg-success text-white">
<span class="clearfix">
<h1 class="float-left">H1 Float left</h1>
</span>
<span class="clearfix">
<h2 class="float-left">H2 Float left</h2>
</span>
</div>
<span class="font-weight-bolder">
Wrapped by flex with float
</span>
<div class="border bg-success text-white d-flex flex-column">
<h1 class="float-left ">H1 Float left</h1>
<br>
<h2 class="float-left ">H2 Float left</h2>
</div>
</div>
</body>
</html>
|
Output: