Bootstrap 3: navbar dropdown opening on hover and opening on click for collapsed navbar

The Bootstrap 3 css framework contains a pretty good navigation component called “navbar”. The navbar automatically collapse when the viewport is too small. The menu’s of the navbar open when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them. It took me some time to figure out a solution to enable this behavior which kept the click behavior for tablets and phones.

2014-10-23: There’s an updated version at: Boostrap navbar opens on hover with clickable parent which supports effects/animations and the parent remains navigable.

The Bootstrap 3 css framework contains a pretty good navigation component called “navbar”. The navbar automatically collapse when the viewport is too small. The menu’s of the navbar open when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them. It took me some time to figure out a solution to enable this behavior which kept the click behavior for tablets and phones.

Continue reading “Bootstrap 3: navbar dropdown opening on hover and opening on click for collapsed navbar”

Bootstrap 3: full width container

When working with bootstrap 3 I came across the need for a full width container. Earlier I explained how to get a full width row but in this case I needed a wrapper around the row. So let’s make a full width container.

HTML

[html]<div class="container-full">
<div class="row">
..
</div>
</div>[/html]

CSS

A full width container requires 2 things, a 100% width and no margins:

[css].container-full {
margin: 0 auto;
width: 100%;
}[/css]

A demo is available on BootPly.

Bootstrap 3: fat table header bottom border

The Bootstrap libary styles a lot of components pretty nicely. It also styles tables and since bootstrap 3 they made a change to the border of a header row. Some like it, but I don’t so let’s fix it!

The html for a default table is pretty straight forward and looks like this:

Bootstrap 3 table

Note the fat border of the table row. Now let’s write some CSS:

[css].table-light thead > tr > th {
border-bottom: none;
}[/css]

And add this class to the table element:

[html]<table class="table table-light">[/html]

That makes the table looks like this:

bs3_table_fixed

A demo is available on JSFiddle.

Bootstrap 3: pagination-centered got removed

In bootstrap 2 there was a class called pagination-centered available which could be assigned to the unordered list. In bootstrap 3 this is changed, while that change isn’t listed on the migration page. The fix requires some extra markup.

For this example we have a regular pagination component:

[html]<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>[/html]

The pagination is aligned to the left by default. To center this, we need to wrap it in a div:

[html]<div class="pagination-centered">
<ul class="pagination">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>[/html]

Now we add the pagination-centered CSS class:

[css].pagination-centered {
text-align: center;
}[/css]

That centers the pagination.

A demo is available on JSFiddle.