Tag: bootstrap

When working with bootstrap I’m developing some small modifications on bootstrap elements. Those modifications can now be found in a github repository.

https://github.com/dvdheiden/bootstrap-extended

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.

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:

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

A demo is available on JSFiddle.

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.