css • Bootstrap 4.4 - martindubenet/wed-dev-design GitHub Wiki
[ Bootstrap v.5 ][ Bootstrap v.4.4 ][ Grid & Breakpoints ]
The following data has been copy/pasted from the official documentation in order to find quickly what I'm looking for.
| Context | Classes | Description |
|---|---|---|
| Borders |
border. ● single side border: border-top, border-right, border-bottom, border-left. ● border-color: border border-primary, border border-warning, etc… — - border-radius: rounded VS rounded-0. ● border-radius on specific corners: rounded-top, rounded-right, rounded-bottom, rounded-left. ● border-radius styles: rounded-circle, rounded-pill. ● border-radius on @breakpoints: rounded-sm, rounded-md, rounded-lg, rounded-xl. |
Border-radius are set via the rounded set of classes. |
| Clearfix | clearfix |
|
| Close Icon | close |
|
| Colors within contexts | ● Red: text-danger, btn-danger, bg-danger, border-danger ● Yellow: text-warning, btn-warning, bg-warning, border-warning ● Blue: text-info, btn-info, bg-info, border-info ● Green: text-success, btn-success, bg-success, border-success ● Light gray: text-light (white), btn-light, bg-light, border-light ● Dark gray: text-dark, btn-dark, bg-dark, border-dark ● White: text-white, bg-white ● Null: text-muted, bg-transparent
|
Other available colors are brand’s primary & secondary sets.See more Basic Bootstrap UI colors |
| Display |
d-block, d-inline-block, d-inline — d-table, d-table-cell, d-table-row — d-flex, d-inline-flex — d-print-*, d-print-none
|
|
| Embeds |
embed-responsive embed-responsive-16by9 on the container + on the child <iframe class="embed-responsive-item">
|
Available ratios are …-21by9, …-16by9, …-4by3 or …-1by1 for squares. |
| Flex |
d-flex OR d-inline-flex — flex-row, flex-row-reverse VS flex-column, flex-column-reverse — justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around — align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch — flex-wrap, flex-wrap-reverse, flex-nowrap— align-self-start, align-self-end, align-self-center, align-self-baseline, align-self-stretch — flex-fill — flex-grow-* VS flex-shrink-* — order-* — align-content-start, align-content-end, align-content-center, align-content-between, align-content-around
|
|
| Float |
float-right, float-sm-left — float-none
|
Toggle floats on any element, across any breakpoint. |
| Image Replacement | text-hide |
Use this class to replace text content by a surrounding image. |
| Overflow |
overflow-auto — overflow-hidden
|
|
| Position |
position-absolute, position-fixed, position-relative, position-static, position-sticky — fixed-top, fixed-bottom — sticky-top
|
|
| Screen Readers | sr-only sr-only-focusable |
Use this class to hide elements on ALL devices except ONLY screen readers. |
| Shadows |
shadow, shadow-small, shadow-lg — shadow-none
|
Add or remove shadows to elements with box-shadow utilities. |
| Sizing | height: h-25, h-50, h-75, h-100, h-auto — min-height: mh-100width: w-25, w-50, w-75, w-100, w-auto — min-width: mw-100viewport width/height: vw-*, vh-* — min-vw-*, min-vh-*
|
Relative to the parent. 25%, 50%, 75%, 100%, and auto by default. m (mw-*, mh-*) = max-width and max-height. v (vw-*, vh-*) = viewport-size. |
| Spacing | margins: m-0, mt-0, mr-0, mb-0, ml-0, m-auto, mr-auto ml-autoPadding: p-0, pt-0, pr-0, pb-0, pl-0
|
1 = $spacer * .25, 2 = $spacer * .5, 3 = $spacer, 4 = $spacer * 1.5 and 5 = $spacer * 3. |
| Stretched Links | stretched-link |
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS. |
| Text |
font-weight-bold, font-weight-light, font-weight-normal — font-italic — text-center, text-md-center, text-left, text-right — text-break VS text-truncate — text-lowercase, text-uppercase, text-capitalize — text-wrap VS text-nowrap
|
|
| Vertical Alignment |
align-baseline — align-bottom — align-middle — align-text-bottom — align-text-top — align-top
|
|
| Visibility |
visible VS invisible
|
Grouped by context from _variables.scss
// line #432
$btn-disabled-opacity: .65 !default;
$btn-link-disabled-color: $gray-600!default;
// line #469
$input-disabled-bg: $gray-200 !default;
// line #530
$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
$custom-control-label-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
// line #572
$custom-select-disabled-color: $gray-600 !default;
$custom-select-disabled-bg: $gray-200 !default;
// line #619
$custom-range-thumb-disabled-bg: $gray-500 !default;
$custom-file-disabled-bg: $input-disabled-bg !default;
// line #691
$nav-link-disabled-color: $gray-600 !default;
// line #730
$navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
// line #772
$dropdown-link-disabled-color: $gray-600 !default;
// line #806
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;