Bootstrap Components

Contact Us or call 1-877-932-8228
Bootstrap Components

Bootstrap Components

In addition to the responsive grid, Bootstrap offers a wide range of pre-built user-interface elements: icons, navigation elements, buttons, and other components rendered via Bootstrap's CSS and, for some elements, JavaScript.

For instance, we might use Bootstrap's "pagination" component to present a set of page links for a blog, allowing users to access the next page of blog posts, page 2 of blog posts, etc.:

Page Links

The code for the example above looks as follows:

<nav>
	<ul class="pagination">
		<li>
			<a href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li>
			<a href="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

As with all Bootstrap components, the key here is to use the correct markup, class names, and attributes - in this case, an unordered list with class pagination.

Another useful component is "pills", a navigation element presenting a set of buttons. Here is an example of pills set to justify (span the width of the screen) on larger viewports:

Pills Element

and to stack on smaller viewports like phones:

Stacked Pills Element

And here's the code:

<ul class="nav nav-pills nav-justified">
	<li role="presentation" class="active"><a href="#">Link 1</a></li>
	<li role="presentation"><a href="#">Link 2</a></li>
	<li role="presentation"><a href="#">Link 3</a></li>
</ul>

You can find examples and code for all available components on the Bootstrap website.

Next