You are here

Using icons, buttons and other components in Drupal's Bootstrap theme

About Boostrap components

What I really love about Drupal's Bootstrap theme is the fact that you get to use all of Bootstrap's CSS, icons and other fun components.

Once you've implemented a Bootstrap sub-theme, using one of the many icons, buttons, drop-downs and other components is a breeze if you just follow the examples in the Bootstrap components guide.

Note that the theme I use here is not based on Bootstrap, but I have built and manage other sites that are.

Component examples

I will highlight just a few of the many components you will have at your disposal if you subtheme Boostrap in your Drupal (or any) site.

Just hit the 'Source' button on the CKEditor toolbar, if you use CKEditor, to edit the actual html source code in your node if you're implementing these components on a single page.  Or simply code these into your subtheme's CSS files if you're theming certain views, content types, etc.

Icons

Bootstrap has a generous number of icons (glyphicons), which are all beautifully designed, clean, clear and tie into the theme perfectly.  If you use the Bootstrap theme, these are free and easy for you to use. 

Here is a sampling of the look and feel of the icons, though you can see the full array and more details on how to use them in their Components guide.

Bootstrap icons

If you want to insert one of these icons into a view of yours or a single post or code it into your sub-theme's css, here is how using them works.  You just need a span that contains both the classes 'glyphicon' and the name of the specific icon you would like to use, such as 'glyphicon-heart-empty'.  Then close the span and feel free to include text, additional images or anything else on that same line.

<span class="glyphicon glyphicon-heart-empty"></span> Bookmark

Here is how the above bookmark with an empty heart icon looks at the top of a post:

 

Buttons

Here is another great use for all the icon options Bootstrap comes with: you can combine them with buttons!  In the example below, I've put the 'glyphicon-tasks' icon, which just looks like a list, into a button.  It would be so easy to make that button a link to similarly themed posts at the bottom of the current post that links to a view!

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-tasks"></span> Similar posts
</button>

And here is how the result looks:

 

Labels

Another fun component is labels, which you can use to quickly show a new or updated item within a list.  We all have those pages with the lists of staff or courses or online resources, and when we add or update something, no one would ever know that something's changed!  Well look at a list that makes use of Bootstrap's built-in badges css:

<ul>
	<li><a href="#">Resource link #1 <span class="label label-warning">updated</span></a></li>
	<li><a href="#">Resource link #2 <span class="label label-success">new</span></a></li>
	<li><a href="#">Resource link #3</a></li>
	<li><a href="#">Resource link #4</a></li>
	<li><a href="#">Resource link #5</a></li>
	<li><a href="#">Resource link #6 <span class="label label-warning">updated</span></a></li>
</ul>

As you can see, you use labels by creating a span with a class of "label" and optionally a label type, which varies the color of the label.  'label-default' is gray, 'label-success' is green (which I used to show my new items), 'label-warning' is orange (which I used for my updated items), 'label-danger' is red, etc.  Use them to your own purposes!

 

Jumbotron: highlighting an area

Another component is a pre-styled grey area with rounded corners, called the jumbotron, which you can use to highlight a certain section of your current page (or of a view or content type).

<div class="jumbotron">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<span class="glyphicon glyphicon-arrow-right"></span> <a href="/about-event">Read more</a>
</div>

 

Progress bars

There are so many more beautiful examples to choose from, but the last one I'll highlight is the progress bar.  There are a lot of different and creative way these can be used as easy infographics, I think, and thus my choice.

The progress bars come in a variety of pre-defined colors, which use the same classes as the labels I demonstrated above.  In my example below, I'm using progress bars to show various statistics without having to do any special css or graphics work.

<div class="progress"> &nbsp; Some statistic
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  </div>
</div>
<div class="progress"> &nbsp; Percentage project complete
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  </div>
</div>
<div class="progress"> &nbsp; Some other statistic
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  </div>
</div>

By using the 'progress-bar-success,' 'progress-bar-info,' and 'progress-bar-warning' classes appropriately, you can show various stats or indicators easily on a page (think percentage jobs in a certain industry, or percentage states that have adopted a law, or any other stat example).

Here is how the Bootstrap progress bars look:

 

More components

There are many other fun components to try such as drop-downs (both horizontal and vertical), input form components, thumbnail styles and page sectioning.  Go explore!

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.