Techie Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

Techie is a bootstrap theme designed for techies. It features a gradient black navbar, dropdown menu with a blue hover, a cool blue connect bar, a sticky black footer and gradient buttons. The HTML template displays HTML elements and bootstrap elements, so when you are customizing the template, you can see it all.

[screenshot]

Sass Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

The Sass Bootstrap Theme is an SASS language inspired Twitter Bootstrap theme. It features a primary pink and grey colour scheme with clan typography. It is a great theme for web designers, web developers, fashion websites or blogs, or other design website.

Bootstrap’s glyphicons are not included. If you wish to use font icons, I would highly recommend Font Awesome.

This theme comes in minified or unminified assets, plus the ability to make the components gradients, instead of the default flat UI.

[screenshot]

Forest Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

Forest is a Twitter Bootstrap theme inspired by the forest.

The primary colour is a natural green and the secondary colour is a rich brown. Supportive colours are taken with the colours you can see in the fall season.

Glyphicons are not included by default. If you are looking for font icons, I suggest using Font Awesome.

Facebook Button using Bootstrap

See the Pen
Facebook Button for Bootstrap
by Brandon Himpfen (@brandonhimpfen)
on CodePen.

HTML

<a href="#" title="Facebook" class="btn btn-facebook btn-lg"><i class="fa fa-facebook fa-fw"></i> Facebook</a>

CSS

.btn-facebook {
	  background: #3B5998;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #263961; 
	}
	.btn-facebook:link, .btn-facebook:visited {
	  color: #fff;
	}
	.btn-facebook:active, .btn-facebook:hover {
	  background: #263961;
	  color: #fff;
	}

Search Button using Bootstrap

See the Pen Search Button using Bootstrap by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="container">
<div class="input-group">
	<input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-search" type="button"><i class="fa fa-search fa-fw"></i> Search</button>
      </span>
</div>
</div>

CSS

.btn-search {
	  background: #424242;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #1c1c1c;
	}
	.btn-search:link, .btn-search:visited {
	  color: #fff;
	}
	.btn-search:active, .btn-search:hover {
	  background: #1c1c1c;
	  color: #fff;
	}

Bootstrap 4 Table Inverse

Bootstrap has announced the first alpha release of Bootstrap 4. Bootstrap 4 is built using Sass, instead of Less and comes with an improved grid, outline buttons and what we are going to look at today, inverse table.

See the Pen Bootstrap 4: Table Inverse by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

Bootstrap Table Inverse HTML

There is no need to extend Bootstrap with CSS, as inverse table is included in Bootstrap 4. All you have to do is add the table-inverse class to the table tag.

Before:

<table class="table">

After:

<table class="table table-inverse">

That’s it!

Here is an example inverse table you can use as a starting point.

<div class="table-responsive">
    <table class="table table-inverse">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>