- Nav and Navbar: These components allow you to create navigation elements on your page. A Nav is typically used for in-page navigation (such as a tab system for different steps in a wizard), while a Navbar is used for navigation between pages.
- The grid system: Bootstrap’s grid system is an easy way to position elements on the screen. The grid allows you to define widths and positioning in terms of columns, which makes alignment of objects on the screen accurate. Bootstrap is set up with 12 columns in the grid, and the column widths are based on the size of the viewport. This allows your design to adjust automatically to a smaller or larger screen, a rotating mobile device or the user resizing their browser window.
- Carousels: Many modern websites have carousels that cycle through a series of items to display, such as images or <div>. Many stores, for example, use the carousel on their home page to show off their top sellers or new products. (For best practices, the usability experts at the Nielsen Norman Group offer this article on making the most of carousels.)
One danger of Bootstrap: The default templates provide such an easy start that many developers don’t stray far from them. This results in Bootstrap sites closely resembling one another. After you’ve gotten the hang of Bootstrap, take a look at themes and self-customization so you can make your site truly unique.
Are you a member of the Bootstrap fan club? Share your Bootstrap experiences in the comments section. Interested in web developer hiring trends? See this post.