Boostrap navbar opens on hover with clickable parent

The bootstrap navbar hover post is one of the most visited blogposts of this blog. Recently I got a questions about this on Twitter by @wang_jina, who wanted to know how to open the bootstrap navbar dropdown menu’s on a hover event but keeping the parent clickable. Time for an update!

Continue reading Boostrap navbar opens on hover with clickable parent

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

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

CSS

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

.container-full {
  margin: 0 auto;
  width: 100%;
}

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:

.table-light thead > tr > th {
    border-bottom: none;
}

And add this class to the table element:

<table class="table table-light">

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:

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

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

<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>

Now we add the pagination-centered CSS class:

.pagination-centered {
    text-align: center;
}

That centers the pagination.

A demo is available on JSFiddle.