When working with bootstrap I’m developing some small modifications on bootstrap elements. Those modifications can now be found in a github repository.
Bootstrap extended
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.
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]
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:
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:
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.