Many of the cool components like i.e. Jumbotrons can now be created without re-inventing the weel, thanks to Bootstrap! In this part of the tutorial we will check out some of the most interesting Bootstrap components, which can be used on websites. Not all of them are new, but show the probably most correct way of implementing them.
Jumbotrons are these large bubbles with a call to action. In example to learn more about something. Try the following example to see a live-demo of this cool thing!
<div class="container"> <div class="jumbotron"> <h1>Learn with us!</h1> <p>FreeDeveloperTutorials.com has the best tutorials out there...</p> <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> </div> </div>
This is, well, what it says! It’s a clean looking, underlined page header. Check the example to see, how it looks!
<div class="page-header"> <h1>Aliens landed!<small>What says the queen?</small></h1> </div>
In blogs you see very often blog-entries list, having a picture on the left side and a header with content on the right side. This is a realy nice style for, as said blogs, or newspages etc. With the Bootstrap-media object this becomes really easy to do so. Note, that the images are not resized automatically, so the recommondation is to use images, which are formatted to the desired size already!
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src=".." alt="..."> </a> <div class="media-body"> <h4 class="media-heading">... your header ...</h4> ... your content ... </div> </div>
If we have content, which is distributed over multiple pages, we need to give our users the possibility to navigate between them. This is, where the Bootstrap pager comes into play!
The following example shows the basic pager.
<ul class="pager"> <li><a href="#">Previous Page</a></li> <li><a href="#">Next Page</a></li> </ul>
Full fledged Pager
The bootstrap pager can easily be enhanced with arrows, an inactive state and the aligning to the left and right. The arrows can be added with ← and →, which are the html-encoded arrows. Nothing special. The state can be added with the disabled-class. Finally the previous- and next-class aligns the buttons to the left and right.
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>