Download Flexbox Cheat Sheet - Bootstrap 4 and more Exams Typography in PDF only on Docsity!
Bootstrap 4.4.
CSS
JS
JS is only necessary if you plan on using one or all of the following components: Alerts, Buttons,
Carousel, Collapse, Dropdowns, Modals, Navbar, Tooltips and Scrollspy
Alerts
Badge
Breadcrumb
Buttons
Button group
Card
Carousel
Collapse
Dropdowns
Forms
Input group
Jumbotron
List group
Media object
Modal
Navs
Navbar
Pagination
Popovers
Progress
Scrollspy
Spinners
Toasts
Tooltips
Borders
Clearfix
Close icon
Colors
Display
Embed
Flex
Float
Image replacement
Overflow
Position
Screenreaders
Shadows
Sizing
Spacing
Stretched link
Text
Vertical align
Visibility
Components Utilities
BootstrapCreative.com : 21
Breakpoints
Extra small devices (portrait phones, less than
576px) do not require a breakpoint because
Bootstrap 4 is mobile first.
Breakpoints | Max container width not needed=Extra small < 576px | None (auto) sm=Small ≥ 576px | 540px md=Medium ≥ 768px | 720px lg=Large ≥ 992px | 960px xl=Extra large ≥ 1200px | 1140px
Media Queries
Change the width value to set a media query
for sm, md, lg, xl.
/* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { }
Lists
.list-unstyled Removes default list margin .dl-horizontal Makes list items two columns .list-inline Makes list items inline .list-inline-item Added to each li
Example
item 1
Typography
.text-left Left aligned text .text-*-left Left aligned by breakpoint .text-center Center aligned text .text-right Right aligned text .text-justify Justified text .text-nowrap No wrap text .text-(lowercause, uppercase, capitalize) Changes the text capitalization style .text-decoration-none Removes decoration .text-truncate Truncate text with ellipsis .lead Good for first paragraph of article .text-monospace Changes to monospace font .font-weight-(bold, bolder, normal, light, lighter, italic) Changes the font weight .blockquote Slightly increases font-size and sets a bottom margin for blockquotes .(h1, h2, h3, h4, h5, h6) Used to make an element match the heading styles .display-(1, 2, 3, 4) Large display text. 1=96px, 2=88px, 3=72px, 4=56px
Colors
.text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black- .text-white-
.bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white .bg-transparent
BootstrapCreative.com : 23
Spacing
Sides
t= top, b=bottom, l=left, r=right,
x=x axis, y=y-axis
Size
The values for each level of spacing are
calculation of the base font size which is 16px
or 1rem.
Here the pixel equivalents. 0 =0px, 1 =4px,
2 =2px, 3 -16px, 4 =24px, 5 =48px, auto
.m(t, b, l, r, x, y)-(sm, md, lg, and xl)-(0, 1, 2, 3, 4, 5, auto) Sets margin value, remove breakpoint for xs .p(t, b, l, r, x, y)-(sm, md, lg, and xl)-(0, 1, 2, 3, 4, 5, auto) Sets padding value, remove breakpoint for xs .mx-auto Used to horizontally center an element relative to parent container
Negative Margin
Add the letter n in from of the margin size
value to apply a negative margin.
For example: .mt-n1 would apply a size 1
negative top margin.
Vertical Align
.align-(baseline, top, middle, bottom, text-top, text-bottom) Changes the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Visibility
These classes do not modify the display
property and do not affect layout.
.visible Takes up space and visible .invisible Takes up space and invisible
Overflow
Set how content overflows a parent element.
.overflow-auto Container will have a scroll if the content overflows .overflow-hidden The container will not scroll and the content will be cut off.
Screenreaders
.sr-only Only show on screen readers .sr-only-focusable Show element when it has a focused state
Starter Template
Hello, world!
Left Column Right Column
Navbar
Navbar
Home (current)
Features
Pricing
Dropdown link
Action Another action Something else here
BootstrapCreative.com : 27
Modal
Launch demo modal
Modal title
×
Modal body heading
Modal body text description
Close Save changes
BootstrapCreative.com : 29
Carousel
Carousel Slider Title
Description text to further describe the content of the slide image
Call to Action
Call to Action
Previous
Next
Jumbotron
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Breadcrumbs
Home Library Data
Responsive embed
Tables
thead-dark
1 Nina
Dropdowns
Dropdown Actions
Action One Action Two Action Three
Learn Bootstrap 4 and
Responsive Design Basics.. Fast!
Learn More
BootstrapQuickStart.com
BootstrapCreative.com : 35
.active .accordion .alert .alert-(primary, secondary, success, danger, warning, info, light, dark) .alert-dismissible .alert-heading .alert-link .align-(baseline, top, middle, bottom, text-top, text-bottom) .align-content-(sm, md, lg, xl)-(around, between, center, end, start, stretch) .align-items-(sm, md, lg, xl)-(baseline, center, end, start, stretch) .align-self-(sm, md, lg, xl)-(auto, baseline, center, end, start, stretch) .arrow .badge .badge-(primary, secondary, success, danger, warning, info, light, dark) .badge-pill .bg-(primary, secondary, success, danger, warning, info, light, dark, transparent, white) .blockquote .blockquote-footer .border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, bottom-0, left-0) .border-(bottom, left, right, top) .breadcrumb .breadcrumb-item .bs-popover-(auto, bottom, left, right, top)
.bs-tooltip-(auto, bottom, left, right, top) .btn .btn-block .btn-group .btn-group-(sm, lg) .btn-group-toggle .btn-group-vertical .btn-(sm, lg) .btn-link .btn-outline-(primary, secondary, success, danger, warning, info, light, dark) .btn-(primary, secondary, success, danger, warning, info, light, dark) .btn-toolbar .card .card-body .card-columns .card-deck .card-footer .card-group .card-header .card-header-pills .card-header-tabs .card-img .card-img-bottom .card-img-overlay .card-img-top .card-link .card-subtitle .card-text .card-title .carousel
Alphabetical Index of CSS Classes
.carousel-caption .carousel-control-(next, prev) .carousel-control-(next, prev)-icon .carousel-fade .carousel-indicators .carousel-inner .carousel-item .carousel-item-(left, right) .carousel-item-(next, prev) .clearfix .close .col .col-(sm, md, lg, xl)-(1-12) .col-auto .col-form-label .col-form-label-(sm, lg) .collapse .collapsing .container .container-fluid .container-(sm, md, lg, xl) .custom-checkbox .custom-control .custom-control-inline .custom-control-input .custom-control-label .custom-file .custom-file-control .custom-file-input .custom-file-label .custom-radio .custom-range .custom-select .custom-select-(sm, lg) .custom-switch
.d-(sm, md, lg, xl)-(none, inline, inline- block, block, table, table-cell, table- row, flex, inline-flex) .d-print-(block, inline, inline-block, none, flex, inline-flex, table, table- cell, print-table-row) .disabled .display-(1, 2, 3, 4) .dropdown .dropdown-divider .dropdown-header .dropdown-item .dropdown-item-text .dropdown-menu .dropdown-menu-right .dropdown-menu-(sm, md, lg, xl)-(right, left) .dropdown-toggle .dropdown-toggle-split .dropleft .dropright .dropup .embed-responsive .embed-responsive-(16by9, 1by1, 21by9, 4by3) .embed-responsive-item .fade .figure .figure-caption .figure-img .fixed-bottom .fixed-top .flex-(sm, md, lg, xl)-(row, row-reverse, column) .flex-(sm, md, lg, xl)-(nowrap, wrap, wrap-reverse) .flex-column
.nav .nav-fill .nav-item .nav-justified .nav-link .nav-pills .nav-tabs .navbar .navbar-brand .navbar-collapse .navbar-(dark, light) .navbar-expand-(sm, md, lg, xl) .navbar-nav .navbar-text .navbar-toggler .navbar-toggler-icon .no-gutters .offset-(sm, md, lg, xl)-(1-12) .order-(sm, md, lg, xl)-first .order-(sm, md, lg, xl)-last .order-(sm, md, lg, xl)-(0-12) .p(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5, n1, n2, n3, n4, n5) .overflow-(auto, hidden) .page-item .page-link .pagination .pagination-(sm, lg) .popover .popover-body .popover-header .position-(absolute, fixed, relative, static, sticky) .pre-scrollable .progress
.progress-bar .progress-bar-animated .progress-bar-striped .rounded .rounded-(top, right, bottom, left, circle, pill, 0, lg, sm) .rounded-circle .row .row-cols-(sm, md, lg, xl)-(1, 2, 3, 4, 5,
.shadow-(none, sm, lg) .show .showing .small .spinner-(border, border-sm, grow, grow-sm) .sr-only .sr-only-focusable .stretched-link .tab-content .tab-pane .table .table-active .table-bordered .table-borderless .table-hover .table-(primary, secondary, success, danger, warning, info, light, dark) .table-responsive-(sm, md, lg, xl) .table-sm .table-striped .text-(primary, secondary, success, danger, warning, info, light, dark, muted, white, decoration-none, reset) .text-hide .text-justify
BootstrapCreative.com : 39
.text-(sm, md, lg, xl)-(center, left, right) .text-(lowercase, uppercase, capitalize, black-50, body, monospace, white-50, break) .text-(wrap, nowrap) .text-truncate .text-warning .thead-dark .thead-light .toast .toast-(body, header) .tooltip .tooltip-inner .valid-feedback .valid-tooltip .vh- .vw- .visible .w-(100, 75, 50, 25) .was-validated .w-auto
