Clearfix with Twitter Bootstrap

twitter bootstrap clearfix push down

add this class to your CSS:

.row{
overflow:hidden;
}

DEMO


it is because of your aside, you set fixed width to aside and set margin to your main-content, this is not right way to put element side by side. but if you use percentage width to your aside and main-content and use float it will look good and there is no need for overflow:hidden (or auto).

look at this:

DEMO

#sidebar{
float: left;
width: 20%; /* instead 260px */
position: relative;
background: #ddd;
display: block
}

#main-content{
background: #FFF;
position: relative;
min-height: 600px;
width: 80%; /* instead auto */
float:left; /* added */
}

div class=clearfix/div causes a gap between my columns

You should reverse the push/pull columns...

            <div class="clearfix"></div>
<div class="col-md-6 col-md-push-6"><img src="http://via.placeholder.com/500x300" alt="Picture of room two" class="img-responsive" width="500px" height="300px"></div>
<div class="col-md-6 col-md-pull-6">
<div class="rooms-photo-text">
<h2><span style="color: #bb9b50;">Splendid<br>
</span></h2>
<p>Our Splendid rooms are more spacious than the Cosy and located in both the main house and the coach house building. Beautifully appointed with Cotswolds charm.</p>
<div class="wideSeparatorDark"></div>
</div>
</div>
<div class="clearfix"></div>

https://codepen.io/anon/pen/RQRKLd

How to clear floats properly in twitter bootstrap?

You need to utilize the proper bootstrap classes. If inside a container (a true Bootstrap container), you need a row to offset the padding.

<div class="container">
<div class="row">

<header id="main_header" class="col-md-12">

<nav class="navbar navbar-default" role="navigation">

</nav>

<div class="contact pull-left">

</div>

</header>
</div>
</div>

Bootstrap has pull-left and pull-right already to float content. clearfix shouldn't be needed if you are utilizing a container/row.

Realistically you could also (or instead) use the grid utilities on the nav/contact.

clearfix does not work in the large view

There is a typo in your code:

visable-md

It should be

visible-md

Understanding Bootstrap's clearfix class

.clearfix is defined in less/mixins.less. Right above its definition is a comment with a link to this article:

A new micro clearfix hack

The article explains how it all works.

UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to Thierry Koblentz’s “clearfix reloaded”):

This “micro clearfix” generates pseudo-elements and sets their
display to table. This creates an anonymous table-cell and a
new block formatting context that means the :before pseudo-element
prevents top-margin collapse. The :after pseudo-element is used to
clear the floats. As a result, there is no need to hide any generated
content and the total amount of code needed is reduced.

Including the :before selector is not necessary to clear the
floats, but it prevents top-margins from collapsing in modern
browsers. This has two benefits:

  • It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g.,
    overflow:hidden

  • It ensures visual consistency with IE 6/7 when zoom:1 is applied.


N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context.
Further details can be found here: Better float containment in IE
using CSS expressions.

The use of content:" " (note the space in the content string) avoids
an Opera bug that creates space around clearfixed elements if the
contenteditable attribute is also present somewhere in the HTML.
Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is
to use font:0/0 a.

Legacy Firefox


Firefox < 3.5 will benefit from using Thierry’s method with the
addition of visibility:hidden to hide the inserted character. This
is because legacy versions of Firefox need content:"." to avoid
extra space appearing between the body and its first child element,
in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.)

Alternative float-containment methods that create a new block
formatting context, such as applying overflow:hidden or
display:inline-block to the container element, will also avoid this
behaviour in legacy versions of Firefox.

How do I apply bootstrap's clearfix to my code?

You can also use clearfix outside of bootstrap. As long as you define it in your CSS like this:

.clearfix::after {
content: " ";
display: table;
clear: both; }

And apply the "clearfix" class to any element it requires, like this:

<div class="clearfix"></div>

It should work.

What is the equivalent of this CSS in Twitter Bootstrap?

using css you can simple use the after psudeo

.class1:after, .class2:after //append as many as you like
{
clear:both;
*zoom:1;
height:0;
visibility: hidden;
display:block;
}

alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!

keep unwanted markup out of your html file

Edit: sorry! for some reason the add comment button or upvote button is not working for me tonight.

To append my answer to answer your other question:

twitter bootstrap you say uses a .clearfix class, which is similar to the css I provided below, however their method needs to be added to the element, ie: "element class="clearfix" OR similar, where as css pseduo's we dont need to add this extra bit of code to our document. Take note however, not all browsers support css pseduo's.



Related Topics



Leave a reply



Submit