How to move H2 Beneath H1 by using only float property ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.