Margin and padding utility classes are available to change or reset white space. The scale is based on the following values: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 100. Each direction is also available: top, right, bottom, and left.
/* Direction-specific */
.margin-top-5 {
margin-top: 5px !important;
}
...
.margin-top-100 {
margin-top: 100px !important;
}
/* All directions */
.margin-all-5 {
margin: 5px !important;
}
...
.margin-all-100 {
margin: 100px !important;
}
/* Horizontal */
.margin-x-5 {
margin-left: 5px !important;
margin-right: 5px !important;
}
...
.margin-x-100 {
margin-left: 100px !important;
margin-right: 100px !important;
}
/* Vertical */
.margin-y-5 {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
...
.margin-y-100 {
margin-top: 100px !important;
margin-bottom: 100px !important;
}
/* Direction-specific */
.padding-top-5 {
padding-top: 5px !important;
}
...
.padding-top-100 {
padding-top: 100px !important;
}
/* All directions */
.padding-all-5 {
padding: 5px !important;
}
...
.padding-all-100 {
padding: 100px !important;
}
/* Horizontal */
.padding-x-5 {
padding-left: 5px !important;
padding-right: 5px !important;
}
...
.padding-x-100 {
padding-left: 100px !important;
padding-right: 100px !important;
}
/* Vertical */
.padding-y-5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
...
.padding-y-100 {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
.no-top-spacing {
padding-top: 0 !important;
margin-top: 0 !important;
}
.no-bottom-spacing {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.no-left-spacing {
padding-left: 0 !important;
margin-left: 0 !important;
}
.no-right-spacing {
padding-right: 0 !important;
margin-right: 0 !important;
}
.no-side-spacing {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.no-gutter {
margin-right: 0 !important;
margin-left: 0 !important;
> [class^='col-'],
> [class*='col-'] {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
.no-border {
border: 0 !important;
}
Adjust font size, weight, and styles with the following modifier classes.
h1. heading
h2. heading
h3. heading
h4. heading
h5. heading
h6. heading
<p class="h1">h1. heading</p>
<p class="h2">h2. heading</p>
<p class="h3">h3. heading</p>
<p class="h4">h4. heading</p>
<p class="h5">h5. heading</p>
<p class="h6">h6. heading</p>
Bold
Regular
Italic
capitalize
uppercase
letter-spacing
<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="capitalize">capitalize</p>
<p class="uppercase">uppercase</p>
<p class="letter-spacing">letter-spacing</p>
.font-weight-100
.font-weight-200
.font-weight-300
.font-weight-400
.font-weight-500
.font-weight-600
.font-weight-700
.font-weight-800
.font-weight-900
<p class="font-weight-100">.font-weight-100</p>
<p class="font-weight-200">.font-weight-200</p>
<p class="font-weight-300">.font-weight-300</p>
<p class="font-weight-400">.font-weight-400</p>
<p class="font-weight-500">.font-weight-500</p>
<p class="font-weight-600">.font-weight-600</p>
<p class="font-weight-700">.font-weight-700</p>
<p class="font-weight-800">.font-weight-800</p>
<p class="font-weight-900">.font-weight-900</p>
Directly modify the color of links to change it from the default color.
No modifier<a href="#">No modifier</a>
<a href="#" class="link-primary">.link-primary</a>
<a href="#" class="link-light">.link-light</a>
<a href="#" class="link-dark">.link-dark</a>
<a href="#" class="link-white">.link-white</a>
Add a border radius using the following modifiers.
<i class="fa fa-cloud icon-bg icon-dark rounded"></i>
<i class="fa fa-cloud icon-bg icon-dark rounded-2x"></i>
<i class="fa fa-cloud icon-bg icon-dark circle"></i>
Force an element to be shown or hidden with the use of .show and .hidden classes. The .invisible class 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.
Utilize the .text-hide class or mixin to help replace an element's text content with a background image.
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user).
<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>
<h1 class="text-hide">Custom heading</h1>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
When utilizing background images, you can modify the positioning with the following classes.
<section class="site-content text-center bg-img bg-center-center" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-center-top" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-center-bottom" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-left-center" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-left-top" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-left-bottom" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-right-center" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-right-top" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>
<section class="site-content text-center bg-img bg-right-bottom" style="background-image: url('/docs/img/presidentsmansion01_1920.jpg');">...</section>