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.

Bootstrap 3: row class causes horizontal scrollbar

The Bootstrap CSS framework is since version 3, just like Foundation, a mobile first front-end framework. By switching to mobile first it finally can take on the competition with Foundation. Therefor I decided to give it a try on a new project that was recently started. Although being mobile first, I expected it to work for a full-width layout anyway. It does, but the row class causes a horizontal scrollbar. Why is this and how to fix this behaviour?

Rows behave like this when they aren’t placed in a container. See the Bootstrap documentation.

The Bootstrap CSS framework is since version 3, just like Foundation, a mobile first front-end framework. By switching to mobile first it finally can take on the competition with Foundation. Therefor I decided to give it a try on a new project that was recently started. Although being mobile first, I expected it to work for a full-width layout anyway. It does, but the row class causes a horizontal scrollbar. Why is this and how to fix this behaviour?

Continue reading Bootstrap 3: row class causes horizontal scrollbar

Foundation: custom select not clickable

The ZURB foundation responsive CSS framework works pretty fine.

Today I found out that some of the custom dropdown select boxes weren’t clickable, only when I clicked on the arrow it was displaying the options. Every browser which shows the custom forms are affected by this (Firefox, Chrome).

After some fiddling around I found out why this occurs.

The ZURB foundation responsive CSS framework is really great and I’m using it for almost every new project.

Today I found out that some of the custom dropdown select boxes weren’t clickable, only when I clicked on the arrow it was displaying the options. Every browser which shows the custom forms are affected by this (Firefox, Chrome).

After some fiddling around I found out why this occurs.

Continue reading Foundation: custom select not clickable