Welcome to Stilearn 2.0
Helper Classes
Close icon
Use the generic close icon for dismissing content like modals and alerts.
<button type="button" class="close" aria-hidden="true">×</button>
Quick floats
Float an element to the left or right with a class. !important
is included to avoid specificity issues. Classes can also be used as mixins.
<div class="pull-left">...</div> <div class="pull-right">...</div>
Clearfix
Clear the float
on any element with the .clearfix
class. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
<!-- Usage as a class --> <div class="clearfix">...</div>
Screen reader content
Hide an element to all devices except screen readers with .sr-only
. Necessary for following Bootstrap accessibility best practices.
<a class="sr-only" href="#content">Skip to main content</a>
Background helper
Allows you to select the background as you want, use with !important
. This also changed the font color.
.bg-midnight .bg-cloud .bg-silver .bg-white .bg-darknight .bg-primary .bg-success .bg-info .bg-warning .bg-danger
<div class="bg-primary">...</div> <div class="bg-success">...</div> <div class="bg-info">...</div> <div class="bg-warning">...</div> <div class="bg-danger">...</div> <div class="bg-inverse">...</div> <!-- Also avilable --> <div class="bg-darknight">...</div> <div class="bg-midnight">...</div> <div class="bg-cloud">...</div> <div class="bg-silver">...</div> <div class="bg-white">...</div> <div class="bg-teal">...</div> <div class="bg-green">...</div> <div class="bg-orange">...</div> <div class="bg-red">...</div> <div class="bg-blue">...</div>
Border Helper
Add class .bordered
to give a border on any element. Default style 1px solid #E0E4E8
. See demo and available class below:
.bordered .bordered-flat .bordered-top .bordered right left .bordered-bottom .border-primary .border-green .border-info .border-orange .border-midnight
<div class="bordered">...</div> <div class="bordered-top">...</div> <!-- bordered on top only --> <div class="bordered-right">...</div> <!-- bordered on right only --> <div class="bordered-bottom">...</div> <!-- bordered on bottom only --> <div class="bordered-left">...</div> <!-- bordered on top left --> <div class="bordered-flat">...</div> <!-- bordered all, but 2px on bottom --> <!-- Also can change border color --> <div class="border-primary">...</div> <div class="border-success">...</div> <div class="border-info">...</div> <div class="border-warning">...</div> <div class="border-danger">...</div> <div class="border-darknight">...</div> <div class="border-midnight">...</div> <div class="border-cloud">...</div> <div class="border-silver">...</div> <div class="border-white">...</div> <div class="border-teal">...</div> <div class="border-green">...</div> <div class="border-orange">...</div> <div class="border-red">...</div> <div class="border-blue">...</div> <!-- Disable border --> <div class="no-border">...</div>
use .pre-scrollable .nicescroll-off
Carets
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
<span class="caret"></span>
Center content blocks
Set an element to display: block
and center via margin
. Available as a mixin and class.
<div class="center-block">...</div>
Showing and hiding content
Force an element to be shown or hidden (including for screen readers) with the use of .show
and .hidden
classes. These classes use !important
to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling.
.hide
is available, but it does not always affect screen readers and is deprecated as of Bootstrap v3.0.1. Use .hidden
or .sr-only
instead.
Furthermore, .invisible
can be used to toggle only the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document.
<div class="show">...</div> <div class="hidden">...</div>
Text helper
Allows you to select the color, sizing or Font style, use with !important
.
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
Consequat condimentum, fusce tincidunt, faucibus ante praesent
<!-- Bootstrap color helper --> <div class="text-primary">...</div> <div class="text-success">...</div> <div class="text-info">...</div> <div class="text-warning">...</div> <div class="text-danger">...</div> <div class="text-muted">...</div> <!-- Also avilable --> <div class="text-darknight">...</div> <div class="text-midnight">...</div> <div class="text-cloud">...</div> <div class="text-silver">...</div> <div class="text-white">...</div> <div class="text-teal">...</div> <div class="text-green">...</div> <div class="text-orange">...</div> <div class="text-red">...</div> <div class="text-blue">...</div> <!-- Sizing --> <div class="text-sm">...</div> <!-- .8em of parent font-size --> <div class="text-lg">...</div> <!-- 1.2em of parent font-size --> <div class="text-xg">...</div> <!-- 1.6em of parent font-size --> <div class="text-16">...</div> <!-- 16px font-size --> <div class="text-24">...</div> <!-- 24px font-size --> <div class="text-32">...</div> <!-- 32px font-size --> <div class="text-48">...</div> <!-- 48px font-size --> <div class="text-64">...</div> <!-- 64px font-size --> <!-- Styling --> <div class="text-bold">...</div> <div class="text-italic">...</div> <div class="text-underline">...</div> <div class="text-linethrough">...</div> <div class="text-lead">...</div> <!-- 300 font-weight --> <div class="text-nodecor">...</div> <!-- no decoration -->
use .pre-scrollable
Shadow helper
Give a nice shadow to any element. Use with .shadow
or disable shadow with no-shadow
.
.shadow .shadow .no-shadow
Corner helper
Give 4px
border radius on any element with .corner
. See available class below:
.corner .corner-top .corner-bottom .corner-tl/br .no-corner
<div class="corner">...</div> <!-- corner all --> <div class="corner-top">...</div> <!-- top corner --> <div class="corner-tr">...</div> <!-- top right corner --> <div class="corner-tl">...</div> <!-- top left corner --> <div class="corner-bottom">...</div> <!-- bottom corner --> <div class="corner-br">...</div> <!-- bottom right corner --> <div class="corner-bl">...</div> <!-- bottom left corner --> <!-- Disable corner --> <div class="no-corner">...</div>
Responsive Utilities
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
.visible-xs |
Visible | Hidden | Hidden | Hidden |
.visible-sm |
Hidden | Visible | Hidden | Hidden |
.visible-md |
Hidden | Hidden | Visible | Hidden |
.visible-lg |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
Class | Browser | |
---|---|---|
.visible-print |
Hidden | Visible |
.hidden-print |
Visible | Hidden |