How to move H2 Beneath H1 by using only float property ? Last Updated : 31 Oct, 2019 Comments Improve Suggest changes Like Article Like Report 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 & 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: Comment More infoAdvertise with us Next Article How to move H2 Beneath H1 by using only float property ? V VigneshKannan3 Follow Improve Article Tags : Web Technologies HTML Bootstrap Bootstrap-Misc Similar Reads How to Place Text Blocks Over an Image using CSS? Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.Below are the approaches to place text blocks over an image using CSS:Table of Content Using Absolute Positioni 2 min read 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 3 min read 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 2 min read 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 3 min read 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 5 min read 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 2 min read How to place background image using ::before pseudo selectors in CSS ? The ::before pseudo-element to place a background image in CSS means adding an image behind content by creating a virtual element before the main content. The ::before element is styled with background-image, content, and positioned with CSS, enhancing design flexibility.The ::before pseudo selector 2 min read How to Create Liquid Filling Effect on Text using HTML and CSS ? The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.The basic styling of the text can be done differentl 3 min read How to Set Offset of Background Image from Right using CSS ? In this article, you can see the ways by which you can set the offset of a background image from the right using CSS. The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the backgro 2 min read How to put the caption below the table using CSS ? In this article we are going to learn How to put the caption below the table using CSS, To put the caption below the table we can use the CSS caption-side property. This property is used to specify the position where the table caption is placed. It is used in HTML Tables. This property can be used w 1 min read Like