Issue with class clearfix in bootstrap

javascript css twitter-bootstrap clearfix
user1740381 picture user1740381 · Apr 28, 2013 · Viewed 43.2k times · Source

I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is :

<div class="pull-left">This is a text</div>
<hr class="clearfix" />

What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;' in hr than it works fine. Why clearfix not doing the same as clear: both does ?

Answer

Arun P Johny picture Arun P Johny · Apr 28, 2013

The class clearfix should be applied to the parent container element

<div class="clearfix">
    <div class="pull-left">This is a text</div>
</div>

Demo: Plunker

Related questions

Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features. Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this …

Read More
Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable. Here's what …

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More