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

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

Last Updated : 31 Oct, 2019

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.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
">
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
"></script>
    <script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"></script>
    <script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></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 &amp; 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:

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

V

VigneshKannan3

Improve

Article Tags :

Similar Reads

How to reorder div elements using CSS only ?

We can reorder HTML elements by using many methods in CSS. We use Flexbox's order property. Order property is used to change the visual order and not their logical order. Items in a container are sorted in ascending order value and then by their source code order.Syntax:Integer valuesorder: 1; order

How to overlay one div over another div using CSS

Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple

How to float three div side by side using CSS?

Floating three div elements side by side using CSS means aligning them horizontally in a row. This is done by applying float: left to each div, which moves them to the left of the parent container, allowing them to sit next to each other.These are the following ways to solve this problem:Using the f

How To Make Floating Images Using CSS?

CSS is used to create floating images to allow text to wrap around the image or to position an image a certain way about other content. You can make the floating images in the CSS by using the 3 different ways.Table of Content1. Floating Image with Text Wrapping2. Floating Image with CSS Grid3. Floa

How to move one DIV element inside another using jQuery ?

In this article, we will learn to move one HTML div element inside another using jQuery. The HTML div element is used to define a division or a section in an HTML document.Method used: parent(): This method is used to get the parent of each element in the current set of matched elements, optionally