10

Bootstrap clearfix class with example

 2 years ago
source link: https://www.laravelcode.com/post/bootstrap-clearfix-class-with-example
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Bootstrap clearfix class with example

  520 views

  1 year ago

Bootstrap

In this article, I will show you how you can clear floated space and start new elements from new line.

If you use float property to element, it always float to left or right as you have set. The new elements you may want to start from new line but it may also start in beside floated elements. Here is below example.

Example:

<!doctype html>
<html>
<head>
    <title>Without clearfix</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="border border-3">
            <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">
            <h1>Without clearfix</h1>
        </div>
        <p class="lead">This is new line and should start from new line.</p>
    </div>
</body>
</html>
bootstrap-clearfix-class-with-example-without-clearfix-class.png

You can see <p> element is started after <h1> element which is not as you want. To prevent <p> element start direct after <h1> element, you need to clear the float. Bootstrap .clearfix class clear floated content within a parent element.

You just need to add .clearfix class to the parent element and it will fix the issue. Here is the example:

<!doctype html>
<html>
<head>
    <title>With clearfix</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="border border-3 clearfix">
            <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">
            <h1>With clearfix</h1>
        </div>
        <p class="lead">This is new line and should start from new line.</p>
    </div>
</body>
</html>
bootstrap-clearfix-class-with-example-with-clearfix-class.png

You can see p element started after clearfix class. I hope it will help you.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK