Bootstrap, The Journey Continues

Finally we can move on to using the service I have been espousing the virtues of since my first project, assuming knowledge of the grid this should be simple.

The first and foremost bonus that Bootstrap provides is that it automatically changes the default actions of certain html tags as well as the default text that is used to display. This immediately changes up a few of the factors that lead to boring webpage design.

However, we aren’t here to focus on just the small things that are changed. Lets look at some of what Bootstrap offers beyond the basic.

The following example shows the very basics for setting up a bootstrap page (minus the imports discussed early and the usual barrage of tags (head, body, etc.))

<div class=”container-fluid”>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>

This example shows a fluid container, within which is contained a row, divided into three column groups of four each (adding up to 12!). These columns are specifically told to show up side by side on small screens and up only stacking atop one another on extra small screens.

Now lets add in a couple of Bootstrap functionalities shall we?

<div class=”container-fluid”>
<div class="row">
<div class="col-sm-4">
<table class="table">
<thead>
<tr>
<th>First Initial</th>
<th>Middle Initial</th>
<th>Last Initial</th>
</tr>
</thead>
<tbody>
<tr>
<td>G</td>
<td>J</td>
<td>D</td>
</tr>
<tr>
<td>J</td>
<td>J</td>
<td>J</td>
</tr>
<tr>
<td>Q</td>
<td>M</td>
<td>T</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">The</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">The Stuff</a></li>
<li><a href="#">More of Note</a></li>
<li><a href="#">Lost Chapters</a></li>
</ul>
</div>
</div>
</div>

Lets look at the table first, other classes that can be used within the table tag are

  • .table-striped
  • .table-bordered
  • .table-hover
  • .table-condensed

Any of them can be used, whether in conjunction with one another or as standalone classes their uses should be fairly straight forward however simply

Striped introduces a zebra striping of background colours

Bordered introduces a border around the items and table

Hover causes the row the mouse cursor is over to be highlighted

And condensed causes extra cushion space to be cut down

The second part, the dropdown menu is fairly straightforward, the class denotes the fact that it should be displayed as a button, the button type and the fact that it will be used as a toggle.

The third and final of my simple examples is showing more of what one can do with an unordered list. Namely that it can be used to create beautiful looking tabs that are easy to set up and use.

This grouping of examples was chosen at random from many of the display elements available in Bootstrap, for comprehensive examples of all of the Bootstrap services please go to the tutorials at W3schools.

Like what you read? Give Kevin Watchuk a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.