HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Add meaning through text-colors with the classes below. Links will darken on hover
Add meaning through text-colors with the classes below. Links will darken on hover:
Class | Description | Example |
---|---|---|
.text-muted | Text styled with class "text-muted" | Try it |
.text-primary | Text styled with class "text-primary" | Try it |
.text-success | Text styled with class "text-success" | Try it |
.text-info | Text styled with class "text-info" | Try it |
.text-warning | Text styled with class "text-warning" | Try it |
.text-danger | Text styled with class "text-danger" | Try it |
Add meaning through background-colors with the classes below. Links will darken on hover just like text classes:
Class | Description | Example |
---|---|---|
.bg-primary | Table cell is styled with class "bg-primary" | Try it |
.bg-success | Table cell is styled with class "bg-success" | Try it |
.bg-info | Table cell is styled with class "bg-info" | Try it |
.bg-warning | Table cell is styled with class "bg-warning" | Try it |
.bg-danger | Table cell is styled with class "bg-danger" | Try it |
Class | Description | Example |
---|---|---|
.pull-left | Floats an element to the left | Try it |
.pull-right | Floats an element to the right | Try it |
.center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | Try it |
.clearfix | Clears floats | Try it |
.show | Forces an element to be shown (display:block) | Try it |
.hidden | Forces an element to be hidden (display:none) | Try it |
.invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | Try it |
.sr-only | Hides an element to all devices except screen readers | Try it |
.sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | Try it |
.text-hide | Helps replace an element's text content with a background image | Try it |
.close | Indicates a close icon | Try it |
.caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | Try it |
These classes are used to show and/or hide content by device via media queries.
Use one or a combination of the available classes for toggling content across viewport breakpoints:
Classes | 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 |
Hide elements depending on screen size:
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
Result:
Resize this page to see how the text below changes:
As of v3.2.0, the .visible-*-*
classes for come in three variations, one for each CSS display
property value:
Group of classes | CSS display |
---|
visible-*-block | display: block; |
---|---|
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
E.g. for small (sm
) screens, the available .visible-*-*
classes are: .visible-sm-block
, .visible-sm-inline
, and .visible-sm-inline-block
.
The classes .visible-xs
, .visible-sm
, .visible-md
, and .visible-lg
are deprecated as of v3.2.0.
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
Result:
Resize this page to see how the text below changes: