There are many things you can do with Bootstrap tools in LibGuides 2, but it appears that Springshare has not included the full set of Bootstrap specifications. If you see something on the Bootstrap website that you'd like to try, keep in mind that it may not necessarily work. Nevertheless, there are still many tools you can use, and I created this guide to help you learn more about them.
Want to use some highlighting to draw attention to a passage in your LibGuides? It's really easy! All you have to do is use the <mark> tag from HTML5 specification. The browser will do the rest.
This is <mark>highlighted text</mark>.
So now you can point out something important in your LibGuides when you really need to!
Would you like to indicate that you've added something new to your LibGuide? Just add a label to it. The code is easy:
<span class="label label-default">New!</span>
Here's how that looks:
Fantastic New Database New!
But gray is a little bland, don't you think? You can add a little color with just a little extra effort. All you have to do is change the class. Keep the "label" part, then change the second part to the color you want:
As you can see, the text can read anything you want it to say. If you need additional assistance, visit the Bootstrap CSS guide.
Font Awesome is an open-source icon project that uses small icons as a type of illustration. All it takes is a little Cascading Style Sheets know-how, and you can use these little images to juice up your guides. And the best part is, it's easy to do and there's nothing to unlock.
It's already enabled in our LibGuides. To use an icon, such as the unlock icon I used above, all you need to do is add a short bit of code:
<span class="fa fa-unlock"></span>
Nothing needs to go inside those tags for the icon to show. The first part of the CSS class, "fa," should be there to tell the browser that it's a Font Awesome code. The second part, in this case "fa-unlock," is the specific icon. As another example, you can create a heart using the code "fa-heart-o." It looks like this:
There are many tricks you can use to enlarge Font Awesome icons, to make them a fixed width if they're throwing off your design, and other things. For additional details on how to modify Font Awesome, take a look at the Examples page.
You may know that for quotations you can use the <blockquote> tags, but they look a little different with the markup Bootstrap provides. You'll notice the border on the left side only, and the text is a little larger:
This is a quotation. Isn't it lovely?
You'll also notice that the quotation isn't indented much. Will the left-hand border be noticeable compared to the border of the LibGuides container in which it resides? Maybe, maybe not.
If you'd like to make the first paragraph of your text a little larger, as I did in the introduction, just use the "main" CSS class to your paragraph: